最近项目中遇到移动端上传图片文件,但是网上基本是SWF模式上传的。LocalResizeIMG很适合。
有因为小生不是学PHP的,网上demo基本是PHP,自己摸索做出来了asp.net版本的,希望对网友有所帮助。
首先是html:
<a href="javascript:;" class="a-upload"> <input type="file" id="IDcard_pic" name="IDcard_pic" accept="image/jpeg" /> <span>点击这里上传文件</span> </a>这里是三个存放路径的隐藏域
<input type="hidden" id="hididcard" name="hididcard" value="" /> <input type="hidden" id="hidphoto" name="hidphoto" value="" /> <input type="hidden" id="hiddiploma" name="hiddiploma" value="" />
其次是最重要的js代码,为了方便就直接在它demo的js里面做了。
input0.onchange = function () { // 也可以传入图片路径:lrz('../demo.jpg', ... lrz(this.files[0], { width:800,quality:0.7}, function (results) { // 你需要的数据都在这里,可以以字符串的形式传送base64给服务端转存为图片。 console.log(results); setTimeout(function () { //if (results.base64.length > 5242880) //{ // $.dialog.tips("上传失败,文件过大,请上传小于5M的图片", 1, "32X32/succ.png", function () { // location.reload(); // }); //} // 发送到后端 var xhr = new XMLHttpRequest(); var data = { base64: results.base64, size: results.base64.length, // 校验用,防止未完整接收 name:results.origin.name }; xhr.open('POST', '../../Upload.ashx?action=uploadImg', true); xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8'); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { if (xhr.response != 0) { //sessionStorage.setItem("idcard", xhr.response); //document.cookie = "idcard=" + xhr.response; var index= xhr.response.toString().indexOf('&'); $("#hididcard").val(xhr.response.substring(0, index)); $(input0).parent('a').find('span').html(xhr.response.toString().substr(index + 1)); } //result.error // ? alert('服务端错误,未能保存图片') // : demo_report('服务端实存的图片', result.src, result.size); } }; xhr.send(JSON.stringify(data)); // 发送base64 }, 100); }); };
results.base64封装了图片的信息,可以通过它获得压缩后的图片信息
LocalResizeIMG有很多设置图片的字段,我不多说
在data里,你可以把results.base64的其他信息同时发送到后台
通过XmlHttpRequest把数据发送到后端,在后端通过一个一般处理程序完成文件的保存。
以下为一般处理程序Upload.ashx部分代码:
/// <summary> /// 上传图片 /// </summary> /// <param name="context"></param> public void UploadImg(HttpContext context) { //获取base64编码 Dictionary<String, Object> dicParameter = GetParameter(context); string base64 = dicParameter["base64"].ToString();//base64编码 int size = Convert.ToInt32(dicParameter["size"].ToString());//base64大小 string filename = dicParameter["name"].ToString();//原文件名 base64 = base64.Replace(" ", "+");//修复base64将+转为空格 string uid = context.Request.QueryString["uid"];//获得用户id uid = uid.Substring(0, uid.Length - 1);//不知道为什么,uid后面有一个空格 string type = context.Request.QueryString["type"];//获得上传文件类型 string basePath="/uploads/";//基本路径 //string filePath = CommonUtil.GetMapPath(basePath);//文件夹路径 string name = uid + "_" + type + "_"+filename ;//上传到服务器的文件名 //检查上传的物理路径是否存在,不存在则创建 if (!Directory.Exists(filePath)) { Directory.CreateDirectory(filePath); } foreach (string file in Directory.EnumerateFiles(filePath))//删除已上传的图片 { if (file.Substring(file.LastIndexOf("\\")+1).StartsWith(uid + "_" + type + "_")) { File.Delete(file); } } try { Base64StringToImage(base64.Substring(base64.LastIndexOf(",") + 1), filePath + name);//图片保存 string dese = DESEncrypt.Encrypt(basePath + name);//加密数据 context.Response.Write(dese+"&"+filename);//返回加密的文件路径和原文件名 } catch { context.Response.Write(0); } context.Response.End(); }
base64 = base64.Replace(" ", "+");不知道base64为何把‘+’转成空格了,废了我将近一天时间。如果大家没有这种情况便可省略。
/// <summary> /// 获取参数 /// </summary> /// <param name="context"></param> /// <returns></returns> private Dictionary<String, Object> GetParameter(HttpContext context) { StreamReader reader = new StreamReader(context.Request.InputStream); String strJson = HttpUtility.UrlDecode(reader.ReadToEnd()); JavaScriptSerializer jss = new JavaScriptSerializer(); //将json字符串反序列化成一个Dictionary对象 Dictionary<String, Object> dicParameter = jss.Deserialize<Dictionary<String, Object>>(strJson); return dicParameter; }
//保存base64编码到图片文件 protected void Base64StringToImage(string strbase64,string filepath) { try { byte[] arr = Convert.FromBase64String(strbase64); MemoryStream ms = new MemoryStream(arr); System.Drawing.Bitmap bmp = new System.Drawing.Bitmap(ms); //bmp.Dispose(); bmp.Save(filepath, System.Drawing.Imaging.ImageFormat.Jpeg); ms.Close(); } catch (Exception ex) { } }
上传到服务器的文件名规则是:uid_type_原文件名称
上传到服务器的文件路径自己再做下手脚吧,这个不多说。
我是对上传后的文件路径做了加密操作,然后传回前台的是一串编码不是原路径的字符串。同时把原文件名传回前台,方便使用。
完成图片保存后,显示上传文件的名称,表示已上传完毕。
缺点:没有实现上传文件大小限制
我使用的是这个LocalResizeIMG3