jquery.form.js实现异步上传

前台页面

 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();
        }
    }
}