快捷導(dǎo)航

基于jQuery通過(guò)jQuery.form.js插件實(shí)現(xiàn)異步上傳

更新時(shí)間：2015年12月13日 09:21:27 作者：iceKnight

這篇文章主要介紹了基于jQuery通過(guò)jQuery.form.js插件實(shí)現(xiàn)異步上傳，代碼很詳細(xì)，感興趣的小伙伴們可以參考一下

本文主要從前臺(tái)和后臺(tái)代碼分析了jquery.form.js實(shí)現(xiàn)異步上傳的方法，分享給大家，具體代碼如下

前臺(tái)代碼：

@{
 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">
  文件名稱(chēng)：<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ù)器返回信息去更新的頁(yè)面對(duì)象，可以是jquery選擇器字符串或者jquer對(duì)象或者DOM對(duì)象。
    //type 提交類(lèi)型可以是”GET“或者”P(pán)OST“
    //url 表單提交的路徑
    dataType: 'json',
    beforeSend: function () {
     //表單提交前做表單驗(yàn)證
     $("#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)頁(yè)面
    }
   });


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

   $("#iceImg").click(function () {
    $("#myfile").click();
   });
  });
 </script>
 <h1 id="myh1" style="display: none;">加載中...</h1>
</body>
</html>

后臺(tái)代碼：

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('注冊(cè)失敗!因?yàn)槟x擇圖片文件不能大于5M.');window.location='/User/Register';</script>");
     }

     //得到原圖的后綴
     string extName = System.IO.Path.GetExtension(file.FileName);
     //生成新的名稱(chēng)
     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('注冊(cè)失敗!因?yàn)槟催x擇圖片文件.');window.location='/User/Register';</script>");
     }
    }
   }

   return Content("");
  }

  public ActionResult Afupload()
  {
   return View();
  }
 }
}

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

您可能感興趣的文章: