@{
 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數(shù)據(jù)，還包括xml和script格式
    //clearForm Boolean值屬性，表示是否在表單提交成功后情況表單數(shù)據(jù)
    //dataType 提交成果后返回的數(shù)據(jù)格式，可選值包括xml，json或者script
    //target 服務(wù)器返回信息去更新的頁面對象，可以是jquery選擇器字符串或者jquer對象或者DOM對象。
    //type 提交類型可以是”GET“或者”POST“
    //url 表單提交的路徑
    dataType: 'json',
    beforeSend: function () {
     //表單提交前做表單驗證
     $("#myh1").show();
    },
    success: function (data) {
     //提交成功后調(diào)用
     //alert(data.message);
     $("#iceImg").attr('src', '/upload/img/' + data.fileName);
     $("#myh1").hide();
     //防止重復(fù)提交的方法
     //1.0 清空表單數(shù)據(jù)
     $('#fileForm').clearForm();
     //2.0 禁用提交按鈕

     //3.0 跳轉(zhuǎn)頁面
    }
   });


   $("#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 = 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();
  }
 }
}

以上就是針對jquery.form.js實現(xiàn)異步上傳的方法，希望對大家的學習有所幫助。

您可能感興趣的文章: