本文主要從前臺和后臺代碼分析了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 = 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實現異步上傳的方法，希望對大家的學習有所幫助。
新聞熱點
疑難解答
