function upload_xz(imgfile) { ajaxLoading(); debugger; var allFile = imgfile.files; var imageArr = []; var k = 0; for (var i = 0; i < allFile.length; i++) { var file = allFile[i]; //添加一层过滤 var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i; if (!rFilter.test(file.type)) { alert("文件格式必须为图片"); return; } var reader = new FileReader(); reader.readAsDataURL(file); //用文件加载器加载文件 reader.onload = function (event) { alert(event.target.result); var imgdata = event.target.result; // 传入后台保存为图片 $.ajax({ type: "post", url: "../huanjing/HJHelp.ashx", data: { "action": "uploadimg", "imgdata": imgdata, "imgpath": moreimgpath }, error: function (ex) { console.log("保存第" + (k + 1) + "张图片失败"); k++; }, success: function (data) { if (data != "-1") { if (k < allFile.length + 1) { debugger; //返回的地址记录到span上 var filepaths = $("#upload_name_xz").text(); if (filepaths != "") { $("#upload_name_xz").text(filepaths + "," + data); } else { $("#upload_name_xz").text(data); } console.log("保存第" + (k + 1) + "张图片成功"); $("#xzpic_count").text("【" + (k + 1) + "】"); k++; } if (k == allFile.length) { console.log("图片上传完成"); $("#xzpic_count").text("【上传完成】"); } } else { alert("请检查或更换第" + (k+1) + "张图片"); $("#xzpic_count").text("【上传失败】"); } ajaxLoadEnd(); } }); }; } }
前端注意:对于图片可以使用filereader对象进行读取为base64字符串,然后提交后台;这里注意,filereader对象的读取结果在onload回调函数中,而不是readAsDataURL
public void SaveIMG(HttpContext context) { string imgpath = context.Request["imgpath"]; string base64 = context.Request["imgdata"]; //判断图片类型 String[] IMGArr = base64.Split(‘;‘); string type = IMGArr[0].Split(‘/‘)[1]; //保存图片 string imgstr = base64.Split(‘,‘)[1];//纯净的图片数据 //System.Drawing.Bitmap bitmap = null;//定义一个Bitmap对象,接收转换完成的图片 try { byte[] arr = Convert.FromBase64String(imgstr);//将纯净资源Base64转换成等效的8位无符号整形数组 System.IO.MemoryStream ms = new System.IO.MemoryStream(arr);//转换成无法调整大小的MemoryStream对象 System.Drawing.Bitmap bmp = new System.Drawing.Bitmap(ms);//将MemoryStream对象转换成Bitmap对象 ms.Close();//关闭当前流,并释放所有与之关联的资源 int width = bmp.Width; int height = bmp.Height; using (System.Drawing.Bitmap bitmap = new System.Drawing.Bitmap(bmp, width, height)) { string savepath = context.Server.MapPath(imgpath) + DateTime.Now.ToString("yyyyMMdd"); if (!System.IO.Directory.Exists(savepath)) { System.IO.Directory.CreateDirectory(savepath); } string filename = DateTime.Now.ToString("yyyyMMddHHmmss_ffff"); bitmap.Save(savepath + "\\" + filename + "." + type); context.Response.Write("/UploadFile/MoreImg/" + DateTime.Now.ToString("yyyyMMdd") + "/" + filename + "." + type); } } catch (Exception ex) { context.Response.Write("-1"); } }
后端处理使用C#,这里注意using的使用和bitmap的生命周期问题。
本人原来的代码中没有使用
using (System.Drawing.Bitmap bitmap = new System.Drawing.Bitmap(bmp, width, height))
导致,位深度为24的图片无法进行保存,只能保存32位深度的图片
反复查找原因,一直未找到,最后看资料出现GDI+一般性错误的3中情况,才明白此处有问题,修改后,图片可正常上传。