本文主要從前臺(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"> 文件名稱：<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ù)器返回信息去更新的頁面對(duì)象，可以是jquery選擇器字符串或者jquer對(duì)象或者DOM對(duì)象。 //type 提交類型可以是”GET“或者”POST“ //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)頁面 } }); $("#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); //生成新的名稱 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í)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
