C# MVC ajax实现多张图片上传
html代码如下:
<script src="~/Scripts/ajaxupload/ajaxfileupload.js"></script> <div> <div> 图片汇报: </div> <div> <input style="display:initial;" type="file" alt="插入图片" id="uploadImage" onchange="ajaxFileUpload()" name="uploadImage" /> <span id="appendContent"> </span> </div> </div>
js代码如下:
<script> //文件上传 function ajaxFileUpload() { //图片格式验证 var x = document.getElementById("uploadImage"); if (!x || !x.value) return; var patn = /\.jpg$|\.jpeg$|\.png$|\.gif$/i; if (!patn.test(x.value)) { alert("您选择的似乎不是图像文件。"); x.value = ""; return; } var elementIds = ["uploadImage"]; //flag为id、name属性名 $.ajaxFileUpload({ url: '/TaskManager/SaveImage',//上传的url,根据自己设置 type: 'post', secureuri: false, //一般设置为false fileElementId: 'uploadImage', // 上传文件的id、name属性名 dataType: 'text', //返回值类型,一般设置为json、application/json elementIds: elementIds, //传递参数到服务器 success: function (data, status) { //alert(data); if (data == "Error1") { alert("文件太大,请上传不大于5M的文件!"); return; } else if (data == "Error2") { alert("上传失败,请重试!"); return; } else { //这里为上传并做一下请求显示处理,返回的data是对应上传的文件名 $("#appendContent").append("<img width='200' height='200' src='" + "../UploadFile/TaskReportImages/" + data + "' onclick='RemoveImg(this)'/>"); } }, error: function (data, status, e) { alert(e); } }); } //删除图片 function RemoveImg(obj) { $(obj).remove(); } </script>
Controller代码如下:
public class TaskManagerController : BaseController { /// <summary> /// 图片上传 /// </summary> /// <returns></returns> public ActionResult SaveImage() { try { //判断上传文件的数目 if (Request.Files.Count > 0) { //获取文件 HttpPostedFileBase proImage = Request.Files["uploadImage"];//获取上传的图片 //判断上传文件大小,小于5M if (proImage.ContentLength > 5 * 1024 * 1024) { return Content("Error1"); } //截取图片类型:image/png string[] filetypes = proImage.ContentType.Split('/'); //判断文件的类型 if (filetypes[1] == "jpg" || filetypes[1] == "gif" || filetypes[1] == "png" || filetypes[1] == "bmg" || filetypes[1] == "jpeg") { //给上传文件重命名 string filename = DateTime.Now.ToString("yyyyMMddHHmmssfff") + Guid.NewGuid().ToString(); if (Directory.Exists(Server.MapPath("~/Uploadfile/TaskReportImages")) == false)//如果不存在就创建file文件夹 { Directory.CreateDirectory(Server.MapPath("~/Uploadfile/TaskReportImages")); } //文件保存的路径 string filesavepath = Server.MapPath("~/Uploadfile/TaskReportImages/" + filename + "." + filetypes[1]); //保存图片 proImage.SaveAs(filesavepath); //返回文件名,可以在前台展示出来 return Content(filename + "." + filetypes[1]); } else { //图片格式不对 return Content("Error2"); } } else { //上传图片数目小于或者等于0 return Content("Error1"); } } catch { return Content("Error2"); } } }
至此一个简单的图片上传就完成了。