标签:
本案例主要说讲使用ajaxFileUpload实现图片的异步上传。
1、html代码部分
这里的代码,主要设置一下name,后台获取时候要用到,还有设置一个onchange的事件对应的方法:ajaxFileUpload()
1 插入图片:<input style="display:initial;" type="file" alt="插入图片" id="uploadImage" onchange="ajaxFileUpload()" name="uploadImage" /> </span>
2、js部分代码
使用这部分代码,需要引入jq和ajaxfileupload.js这两个文件。在这里主要设置上传路径和对返回的结果做相应的处理
1 //文件上传 2 function ajaxFileUpload() { 3 4 //图片格式验证 5 var x = document.getElementById("uploadImage"); 6 if (!x || !x.value) return; 7 var patn = /\.jpg$|\.jpeg$|\.png$|\.gif$/i; 8 if (!patn.test(x.value)) { 9 alert("您选择的似乎不是图像文件。"); 10 x.value = ""; 11 return; 12 } 13 14 var elementIds = ["uploadImage"]; //flag为id、name属性名 15 $.ajaxFileUpload({ 16 url: ‘/Forum/SaveImage‘,//上传的url,根据自己设置 17 type: ‘post‘, 18 secureuri: false, //一般设置为false 19 fileElementId: ‘uploadImage‘, // 上传文件的id、name属性名 20 dataType: ‘text‘, //返回值类型,一般设置为json、application/json 21 elementIds: elementIds, //传递参数到服务器 22 success: function (data, status) { 23 //alert(data); 24 if (data == "Error1") { 25 alert("文件太大,请上传不大于5M的文件!"); 26 return; 27 } else if (data == "Error2") { 28 alert("上传失败,请重试!"); 29 return; 30 } else { 31 //这里为上传并做一下请求显示处理,返回的data是对应上传的文件名 32 $("#ReplyContent").append("<img width=‘300‘ height=‘300‘ src=‘" + "../UploadFile/ForumImages/" + data + "‘/>"); 33 34 } 35 }, 36 error: function (data, status, e) { 37 alert(e); 38 } 39 }); 40 //return false; 41 }
3、后台处理代码(此处为C#)
后台的处理主要有对上传文件的格式验证,文件大小验证,给文件重命名和设置一下保存路径,最后返回图片的新名字。这样js就可以根据路径去请求该图片并展示出来。
1 try 2 { 3 //判断上传文件的数目 4 if (Request.Files.Count > 0) 5 { 6 //获取文件 7 HttpPostedFileBase proImage = Request.Files["upload"];//获取上传的图片 8 9 10 //判断上传文件大小,小于5M 11 if (proImage.ContentLength > 5 * 1024 * 1024) 12 { 13 return Content("Error1"); 14 } 15 16 //截取图片类型:image/png 17 string[] filetypes = proImage.ContentType.Split(‘/‘); 18 19 //判断文件的类型 20 if (filetypes[1] == "jpg" || filetypes[1] == "gif" || filetypes[1] == "png" || filetypes[1] == "bmg" || filetypes[1] == "jpeg") 21 { 22 //给上传文件重命名 23 string filename = DateTime.Now.ToString("yyyyMMddHHmmssfff") + Guid.NewGuid().ToString(); 24 25 //文件保存的路径 26 string filesavepath = Server.MapPath("~/Uploadfile/ForumImages/" + filename + "." + filetypes[1]); 27 28 //保存图片 29 proImage.SaveAs(filesavepath); 30 31 32 33 //返回文件名,可以在前台展示出来 34 return Content(filename + "." + filetypes[1]); 35 } 36 else 37 { 38 //图片格式不对 39 return Content("Error2"); 40 } 41 42 43 } 44 else 45 { //上传图片数目小于或者等于0 46 return Content("Error1"); 47 } 48 } 49 catch { 50 return Content("Error2"); 51 }
标签:
原文地址:http://www.cnblogs.com/reader/p/5570701.html