总结两个图片上传的方法:
一:使用jquery.form中的ajaxSubmit来实现上传。
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<script src="~/JavaScript/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="~/JavaScript/jquery.form.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { //异步上传图片 $("#btnUpload").click(function () { if ($.trim($("#fileUp").val()) == "") { alert("请选择一个图片文件,再点击上传。"); return; } if (!isImageFileName($.trim($("#fileUp").val()))) { alert("请选择一个图片文件,文件类型错误。"); return; } $('#formFile').ajaxSubmit({ success: function (msg) { if (msg.indexOf("UserFolder") != -1) { var start = msg.indexOf(">"); if (start != -1) { var end = msg.indexOf("<", start + 1); if (end != -1) { msg = msg.substring(start + 1, end); } } $("#upLoadImageShow").attr('src', msg);//这里是重新设置图片的地址 } else { alert(msg); } } }); }); }); function isImageFileName(str) { var reg = /([0-9]{1,}.jpg)|([0-9]{1,}.gif)|([0-9]{1,}.png)|([0-9]{1,}.bmp)/; if (reg.test(str)) { return true; } return false; } </script>
<div> <form id='formFile' name='formFile' method="post" action="/Home/UpLoadDemo2" target='frameFile' enctype="multipart/form-data"> <div> <img alt="" src="~/Image/0.jpg" id="upLoadImageShow" width="130" height="130" /> <input type='file' id='fileUp' name='fileUp' title="选择照片" /> <input id="btnUpload" type="button" name="" value="上传" /> </div> </form> </div>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
[HttpPost] public JsonResult UpLoadDemo2() { //定义错误消息 string msg = ""; //接受上传文件 HttpPostedFileBase hp = Request.Files["fileUp"]; if (hp == null) { msg = "请选择文件."; } //获取上传目录 转换为物理路径 string uploadPath = Server.MapPath("~/UserFolder/"); //获取文件名 string fileName = DateTime.Now.Ticks.ToString() + System.IO.Path.GetExtension(hp.FileName); //获取文件大小 long contentLength = hp.ContentLength; //文件不能大于1M if (contentLength > 1024 * 1024) { msg = "文件大小超过限制要求."; } //保存文件的物理路径 string saveFile = uploadPath + fileName; try { //保存文件 hp.SaveAs(saveFile); msg = "/UserFolder/" + fileName; } catch { msg = "上传失败."; } JsonResult rs = Json(msg); rs.ContentType = "text/html"; return rs; }
二:使用jquery.uploadify实现上传。
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<script src="~/JavaScript/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="~/Content/uploadify/jquery.uploadify.min.js" type="text/javascript"></script> <link href="~/Content/uploadify/uploadify.css" rel="stylesheet" /> <script type="text/javascript"> $(document).ready(function () { $('#uploadify').uploadify({ uploader: '/Home/upload', // 服务器端处理地址 swf: '/Content/uploadify/uploadify.swf', // 上传使用的 Flash width: 60, // 按钮的宽度 height: 23, // 按钮的高度 buttonText: "上传", // 按钮上的文字 buttonCursor: 'hand', // 按钮的鼠标图标 fileObjName: 'Filedata', // 上传参数名称 // 两个配套使用 fileTypeExts: "*.jpg;*.png", // 扩展名 fileTypeDesc: "请选择 jpg png 文件", // 文件说明 auto: true, // 选择之后,自动开始上传 multi: true, // 是否支持同时上传多个文件 queueSizeLimit: 5, // 允许多文件上传的时候,同时上传文件的个数 onUploadSuccess: function (file, data, response) { //成功返回内容(data) $("#upImg").attr("src", "../UserFolder/" + data); $("#upImg").css("display", "block"); } }); }); </script> <div> <h1>uploadify 3.2 文件上传的基本实现</h1> <p> 使用了 12 个参数 <ul> <li>uploader: 服务器端接收上传文件的地址</li> <li>swf:用来实现客户端支持的 Flash</li> <li>width:按钮的宽度</li> <li>height:按钮的高度</li> <li>buttonText: 上传按钮的文字</li> <li>buttonCursor:按钮的鼠标图标</li> <li>fileObjName:上传文件的请求参数名称</li> <li>fileTypeExts:上传文件过滤使用的扩展名</li> <li>fileTypeDesc:上传文件的类型描述</li> <li>auto:选择之后,是否自动开始上传</li> <li>multi:是否允许上传多个文件</li> <li>queueSizeLimit:同时选择多个文件的限额</li> </ul> </p> <span id="uploadify"></span> <img id="upImg" src="" alt="" /> </div>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
public ActionResult Upload(HttpPostedFileBase Filedata) { // 如果没有上传文件 if (Filedata == null || string.IsNullOrEmpty(Filedata.FileName) || Filedata.ContentLength == 0) { return this.HttpNotFound(); } // 保存到 ~/UserFolder 文件夹中 string filename = DateTime.Now.Ticks.ToString() + System.IO.Path.GetExtension(Filedata.FileName); string virtualPath = string.Format("~/UserFolder/{0}", filename); // 文件系统不能使用虚拟路径 string path = Server.MapPath(virtualPath); Filedata.SaveAs(path); return Content(filename); }