基于jQuery通過(guò)jQuery.form.js插件實(shí)現(xiàn)異步上傳
本文主要從前臺(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í)有所幫助。
- 使用jquery.upload.js實(shí)現(xiàn)異步上傳示例代碼
- jQuery實(shí)現(xiàn)jQuery-form.js實(shí)現(xiàn)異步上傳文件
- JavaScript中三種異步上傳文件方式
- asp.net+jquery.form實(shí)現(xiàn)圖片異步上傳的方法(附j(luò)query.form.js下載)
- vue.js異步上傳文件前后端實(shí)現(xiàn)代碼
- asp.net+ajaxfileupload.js 實(shí)現(xiàn)文件異步上傳代碼分享
- JS實(shí)現(xiàn)異步上傳壓縮圖片
- JQuery插件ajaxfileupload.js異步上傳文件實(shí)例
- angularjs中$http異步上傳Excel文件方法
- js異步上傳多張圖片插件的使用方法
相關(guān)文章
jQuery實(shí)現(xiàn)圖片左右滾動(dòng)特效
這篇文章主要介紹了jQuery合作伙伴左右滾動(dòng)特效,功能實(shí)現(xiàn)非常簡(jiǎn)單,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2015-08-08jQuery中的read和JavaScript中的onload函數(shù)的區(qū)別
這篇文章主要介紹了jQuery中的read和JavaScript中的onload函數(shù)的區(qū)別,這兩個(gè)函數(shù)在web編程中是最常用的,一定要搞清楚它們的區(qū)別,需要的朋友可以參考下2014-08-08JavaScript揭秘:實(shí)現(xiàn)自動(dòng)化連連看游戲
這篇文章主要介紹了JavaScript揭秘:實(shí)現(xiàn)自動(dòng)化連連看游戲的相關(guān)資料,需要的朋友可以參考下2023-11-11解決自定義$(id)的方法與jquery選擇器$沖突的問(wèn)題
最近網(wǎng)站改版,原來(lái)的js都是原生js,因?yàn)楫?dāng)前比較jquery而且他的組件也比較多,使用方便,所以我們也采用了jquery但跟原來(lái)的$(id)沖突,經(jīng)過(guò)網(wǎng)絡(luò)很多人的推薦我們選擇了這個(gè)方法2014-06-06dreamweaver 8實(shí)現(xiàn)Jquery自動(dòng)提示
這篇文章主要介紹了dreamweaver 8實(shí)現(xiàn)Jquery自動(dòng)提示的方法,需要的朋友可以參考下2014-12-12