php ajax实现图片预览,ajax怎么实现图片的预览上传以及查看缩略图

这次给大家带来ajax怎么实现图片的预览上传以及查看缩略图,ajax实现图片的预览上传以及查看缩略图的注意事项有哪些,下面就是实战案例,一起来看一下。

要实现功能,上传图片时可以预览,因还有别的文字,所以并不只上传图片,实现与别的文字一起保存,当然上来先上传图片,然后把路径和别的文字一起写入数据库;同时为 图片生成缩略图,现只写上传图片方法,文字在ajax里直接传参数就可以了,若要上传多图,修改一下就可以了。

借鉴了网上资料,自己写了一下,并不需要再新加页面,只在一个页面里就OK啦。

JS代码://ajax保存数据,后台方法里实现此方法

function SaveData() {

filename = document.getElementById("idFile").value;

result =test_test_aspx.SaveData(filename).value;

if (result) {

alert("保存成功!");

}

return false;

}

//实现预览功能

function DrawImage(ImgD) {

var preW = 118;

var preH = 118;

var image = new Image();

image.src = ImgD.src;

if (image.width > 0 && image.height > 0) {

flag = true;

if (image.width / image.height >= preW/ preH) {

if (image.width > preW) {

ImgD.width = preW;

ImgD.height = (image.height * preW) / image.width;

}

else {

ImgD.width = image.width;

ImgD.height = image.height;

}

ImgD.alt = image.width + "x" + image.height;

}

else {

if (image.height > preH) {

ImgD.height = preH;

ImgD.width = (image.width * preH) / image.height;

}

else {

ImgD.width = image.width;

ImgD.height = image.height;

}

ImgD.alt = image.width + "x" + image.height;

}

}

}

//当idFile内容改变时

function FileChange(Value) {

flag = false;

document.getElementById("showImg").style.display = "none";

document.getElementById("idImg").width = 10;

document.getElementById("idImg").height = 10;

document.getElementById("idImg").alt = "";

document.getElementById("idImg").src = Value;

}

以下为前台代码:

图片:

预览:

//实现预览

//加这个主要是为了实现查看时显示图片,因为上面的(idImg)加上runat="server" 报错,如有好的方法可以留言

以下为AJAX方法:[Ajax.AjaxMethod()]

public bool SaveData(string fileNamePath)

{

string serverFileName = "";

string sThumbFile = "";

string sSavePath = "~/Files/";

int intThumbWidth = 118;

int intThumbHeight = 118;

string sThumbExtension = "thumb_";

try

{

//获取要保存的文件信息

FileInfo file = new FileInfo(fileNamePath);

//获得文件扩展名

string fileNameExt = file.Extension;

//验证合法的文件

if (CheckFileExt(fileNameExt))

{

//生成将要保存的随机文件名

string fileName = GetFileName() + fileNameExt;

//检查保存的路径 是否有/结尾

if (sSavePath.EndsWith("/") == false) sSavePath = sSavePath + "/";

//按日期归类保存

string datePath = DateTime.Now.ToString("yyyyMM") + "/" + DateTime.Now.ToString("dd") + "/";

if (true)

{

sSavePath += datePath;

}

//获得要保存的文件路径

serverFileName = sSavePath + fileName;

//物理完整路径

string toFileFullPath = HttpContext.Current.Server.MapPath(sSavePath);

//检查是否有该路径 没有就创建

if (!Directory.Exists(toFileFullPath))

{

Directory.CreateDirectory(toFileFullPath);

}

//将要保存的完整文件名

string toFile = toFileFullPath + fileName;

///创建WebClient实例

WebClient myWebClient = new WebClient();

//设定windows网络安全认证

myWebClient.Credentials = CredentialCache.DefaultCredentials;

//要上传的文件

FileStream fs = new FileStream(fileNamePath, FileMode.Open, FileAccess.Read);

//FileStream fs = OpenFile();

BinaryReader r = new BinaryReader(fs);

//使用UploadFile方法可以用下面的格式

//myWebClient.UploadFile(toFile, "PUT",fileNamePath);

byte[] postArray = r.ReadBytes((int)fs.Length);

Stream postStream = myWebClient.OpenWrite(toFile, "PUT");

if (postStream.CanWrite)

{

postStream.Write(postArray, 0, postArray.Length);

}

postStream.Close();

//以上为原图

try

{

//原图加载

using (System.Drawing.Image sourceImage = System.Drawing.Image.FromFile(System.Web.HttpContext.Current.Server.MapPath(serverFileName)))

{

//原图宽度和高度

int width = sourceImage.Width;

int height = sourceImage.Height;

int smallWidth;

int smallHeight;

//获取第一张绘制图的大小,(比较 原图的宽/缩略图的宽 和 原图的高/缩略图的高)

if (((decimal)width) / height <= ((decimal)intThumbWidth) / intThumbHeight)

{

smallWidth = intThumbWidth;

smallHeight = intThumbWidth * height / width;

}

else

{

smallWidth = intThumbHeight * width / height;

smallHeight = intThumbHeight;

}

//判断缩略图在当前文件夹下是否同名称文件存在

int file_append = 0;

sThumbFile = sThumbExtension + System.IO.Path.GetFileNameWithoutExtension(fileName) + fileNameExt;

while (System.IO.File.Exists(System.Web.HttpContext.Current.Server.MapPath(sSavePath + sThumbFile)))

{

file_append++;

sThumbFile = sThumbExtension + System.IO.Path.GetFileNameWithoutExtension(fileName) +

file_append.ToString() + fileNameExt;

}

//缩略图保存的绝对路径

string smallImagePath = System.Web.HttpContext.Current.Server.MapPath(sSavePath) + sThumbFile;

//新建一个图板,以最小等比例压缩大小绘制原图

using (System.Drawing.Image bitmap = new System.Drawing.Bitmap(smallWidth, smallHeight))

{

//绘制中间图

using (System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(bitmap))

{

//高清,平滑

g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;

g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;

g.Clear(Color.Black);

g.DrawImage(

sourceImage,

new System.Drawing.Rectangle(0, 0, smallWidth, smallHeight),

new System.Drawing.Rectangle(0, 0, width, height),

System.Drawing.GraphicsUnit.Pixel

);

}

//新建一个图板,以缩略图大小绘制中间图

using (System.Drawing.Image bitmap1 = new System.Drawing.Bitmap(intThumbWidth, intThumbHeight))

{

//绘制缩略图

using (System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(bitmap1))

{

//高清,平滑

g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;

g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;

g.Clear(Color.Black);

int lwidth = (smallWidth - intThumbWidth) / 2;

int bheight = (smallHeight - intThumbHeight) / 2;

g.DrawImage(bitmap, new Rectangle(0, 0, intThumbWidth, intThumbHeight), lwidth, bheight, intThumbWidth,intThumbHeight, GraphicsUnit.Pixel);

g.Dispose();

bitmap1.Save(smallImagePath, System.Drawing.Imaging.ImageFormat.Jpeg);

return true;

}

}

}

}

}

catch

{

//出错则删除

System.IO.File.Delete(System.Web.HttpContext.Current.Server.MapPath(serverFileName));

return false;

}

}

else

{

return false;

}

}

catch (Exception e)

{

return false;

}

}

///

/// 检查是否为合法的上传文件

///

///

///

private bool CheckFileExt(string _fileExt)

{

string[] allowExt = new string[] { ".gif", ".jpg", ".jpeg" };

for (int i = 0; i < allowExt.Length; i++)

{

if (allowExt[i] == _fileExt) { return true; }

}

return false;

}

//生成随机数文件名

public static string GetFileName()

{

Random rd = new Random();

StringBuilder serial = new StringBuilder();

serial.Append(DateTime.Now.ToString("yyyyMMddHHmmssff"));

serial.Append(rd.Next(0, 999999).ToString());

return serial.ToString();

}

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值