前台页面
1 @{ 2 Layout = null; 3 } 4 <!DOCTYPE html> 5 <html> 6 <head> 7 <meta name="viewport" content="width=device-width" /> 8 <script src="~/Scripts/jquery-1.7.2.min.js"></script> 9 <script src="~/Scripts/jquery.form.js"></script> 10 <title>upload</title> 11 </head> 12 <body> 13 <form id="fileForm" method="post" enctype="multipart/form-data" action="/upload/upload"> 14 文件名称：<input name="fileName" type="text"><br /> 15 上传文件：<input name="myfile" type="file" multiple="multiple"><br /> 16 <input id="submitBtn" type="submit" value="提交"> 17 <img src="#" alt="my img" id="iceImg" width="300" height="300" style="display: block;" /> 18 </form> 19 20 21 <input type="text" name="height" value="170" /> 22 <input id="sbtn2" type="button" value="提交表单2"> 23 24 <input type="text" name="userName" value="" /> 25 <script type="text/javascript"> 26 $(function () { 27 $("#fileForm").ajaxForm({ 28 //定义返回JSON数据，还包括xml和script格式 29 //clearForm Boolean值属性，表示是否在表单提交成功后情况表单数据 30 //dataType 提交成果后返回的数据格式，可选值包括xml，json或者script 31 //target 服务器返回信息去更新的页面对象，可以是jquery选择器字符串或者jquer对象或者DOM对象。 32 //type 提交类型可以是”GET“或者”POST“ 33 //url 表单提交的路径 34 dataType: 'json', 35 beforeSend: function () { 36 //表单提交前做表单验证 37 $("#myh1").show(); 38 }, 39 success: function (data) { 40 //提交成功后调用 41 //alert(data.message); 42 $("#iceImg").attr('src', '/upload/img/' + data.fileName); 43 $("#myh1").hide(); 44 //防止重复提交的方法 45 //1.0 清空表单数据 46 $('#fileForm').clearForm(); 47 //2.0 禁用提交按钮 48 49 //3.0 跳转页面 50 } 51 }); 52 53 54 $("#myfile").change(function () { 55 $("#submitBtn").click(); 56 }); 57 58 $("#iceImg").click(function () { 59 $("#myfile").click(); 60 }); 61 }); 62 </script> 63 <h1 id="myh1" style="display: none;">加载中...</h1> 64 </body> 65 </html>
后台代码
using System; using System.Collections.Generic; using System.Drawing; using System.Linq; using System.Web; using System.Web.Mvc; namespace IceMvc.Controllers { public class UploadController : Controller { // // GET: /Upload/ public ActionResult Index() { return View(); } [HttpPost] public ActionResult Upload() { var filesList = Request.Files; for (int i = 0; i < filesList.Count; i++) { var file = filesList[i]; if (file.ContentLength > 0) { if (file.ContentLength > 5242880) { return Content("<script>alert('注册失败!因为您选择图片文件不能大于5M.');window.location='/User/Register';</script>"); } //得到原图的后缀 string extName = System.IO.Path.GetExtension(file.FileName); //生成新的名称 string newName = Guid.NewGuid() + extName; string imgPath = Server.MapPath("/upload/img/") + newName; if (file.ContentType.Contains("image/")) { using (Image img = Image.FromStream(file.InputStream)) { img.Save(imgPath); } var obj = new { fileName = newName }; return Json(obj); } else { //return Content("<script>alert('注册失败!因为您未选择图片文件.');window.location='/User/Register';</script>"); } } } return Content(""); } public ActionResult Afupload() { return View(); } } }