jquery.form.js实现异步上传

前台页面

 @{
     Layout = null;
 }
 <!DOCTYPE html>
 <html>
 <head>
     <meta name="viewport" content="width=device-width" />
     <script src="~/Scripts/jquery-1.7.2.min.js"></script>
     <script src="~/Scripts/jquery.form.js"></script>
     <title>upload</title>
 </head>
 <body>
     <form id="fileForm" method="post" enctype="multipart/form-data" action="/upload/upload">
         文件名称：<input name="fileName" type="text"><br />
         上传文件：<input name="myfile" type="file" multiple="multiple"><br />
         <input id="submitBtn" type="submit" value="提交">
         <img src="#" alt="my img" id="iceImg" width="300" height="300" style="display: block;" />
     </form>

     <input type="text" name="height" value="170" />
     <input id="sbtn2" type="button" value="提交表单2">

     <input type="text" name="userName" value="" />
     <script type="text/javascript">
         $(function () {
             $("#fileForm").ajaxForm({
                 //定义返回JSON数据，还包括xml和script格式
                 //clearForm Boolean值属性，表示是否在表单提交成功后情况表单数据
                 //dataType 提交成果后返回的数据格式，可选值包括xml，json或者script
                 //target 服务器返回信息去更新的页面对象，可以是jquery选择器字符串或者jquer对象或者DOM对象。
                 //type 提交类型可以是”GET“或者”POST“
                 //url 表单提交的路径
                 dataType: 'json',
                 beforeSend: function () {
                     //表单提交前做表单验证
                     $("#myh1").show();
                 },
                 success: function (data) {
                     //提交成功后调用
                     //alert(data.message);
                     $("#iceImg").attr('src', '/upload/img/' + data.fileName);
                     $("#myh1").hide();
                     //防止重复提交的方法
                     //1.0 清空表单数据
                     $('#fileForm').clearForm();
                     //2.0 禁用提交按钮

                     //3.0 跳转页面
                 }
             });

             $("#myfile").change(function () {
                 $("#submitBtn").click();
             });

             $("#iceImg").click(function () {
                 $("#myfile").click();
             });
         });
     </script>
     <h1 id="myh1" style="display: none;">加载中...</h1>
 </body>
 </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 = ; i < filesList.Count; i++)
            {
                var file = filesList[i];
                if (file.ContentLength > )
                {
                    if (file.ContentLength > )
                    {
                        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();
        }
    }
}