jQuery+ajax簡(jiǎn)單實(shí)現(xiàn)文件上傳的方法
本文實(shí)例講述了jQuery+ajax簡(jiǎn)單實(shí)現(xiàn)文件上傳的方法。分享給大家供大家參考,具體如下:
可以通過ajax來提交表單,而不會(huì)刷新頁(yè)面。主要使用的方法是 $("#formID").ajaxSubmit()方法。
1、要引入js插件
需要下載的附件:jquery.form.js
2、頁(yè)面代碼:
<script src="project/js/jquery.form.js" type="text/javascript"></script> <script src="project/js/fileload.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { createHtml($("#str")); }) </script> <tr> <td>圖片</td> <td> <div id="str"> </div> <p style="display: none;" id="timgUrl"></p> <p style="color: red" id="timgok"></p> <img id="backImgUrl" src="@Model.ImageUrl" style="width:300px; height:200px;" /></td> </tr> <script src="~/project/js/jquery.form.js" type="text/javascript"></script> <script src="~/project/js/fileload.js" type="text/javascript"></script>
fileload.js:
function fileloadon() { $("#msg").html(""); $("#_fileForm").submit(function () { $("#_fileForm").ajaxSubmit({ type: "post", url: "/201410CarVideoAdmin/Home/UploadHelper", success: function (data1) { $('#timgUrl').html(data1); var reg = new RegExp('"', "g"); var imageUrl = $('#timgUrl').text().replace(reg, ""); $('#backImgUrl').attr("src", imageUrl); if ($('#timgUrl').html() != null) { $('#timgok').html("文件上傳成功"); } else { $('#timgok').html("文件上傳失敗"); } }, error: function (msg) { alert("文件上傳失敗"); } }); return false; }); $("#_fileForm").submit(); }
Controller Code:
[HttpPost] public ActionResult UploadHelper() { //開始上傳 string imageUrl = string.Empty; QF.WebGamePlatform.Reference.FileUploadService service = new QF.WebGamePlatform.Reference.FileUploadService(); var fileResult = service.PicUpLoad(Request.Files[0]); if (fileResult.Code == 0) { imageUrl = fileResult.Data.RawImageUrl; } return Json(imageUrl, JsonRequestBehavior.AllowGet); }
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jquery中Ajax用法總結(jié)》、《jQuery切換特效與技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jQuery Ajax文件上傳(php)
- jquery ajax實(shí)現(xiàn)文件上傳功能實(shí)例代碼
- 基于HTML5 Ajax文件上傳進(jìn)度條如何實(shí)現(xiàn)(jquery版本)
- jquery插件ajaxupload實(shí)現(xiàn)文件上傳操作
- jQuery+ajax實(shí)現(xiàn)文件上傳功能
- jQuery插件AjaxFileUpload實(shí)現(xiàn)ajax文件上傳
- 基于jquery ajax的多文件上傳進(jìn)度條過程解析
- jquery實(shí)現(xiàn)異步文件上傳ajaxfileupload.js
- jquery?ajax實(shí)現(xiàn)文件上傳提交的實(shí)戰(zhàn)步驟
相關(guān)文章
jQuery實(shí)現(xiàn)手勢(shì)解鎖密碼特效
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)手勢(shì)解鎖密碼特效,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08jQuery Validate設(shè)置onkeyup驗(yàn)證的實(shí)例代碼
jQuery Validate 插件為表單提供了強(qiáng)大的驗(yàn)證功能,讓客戶端表單驗(yàn)證變得更簡(jiǎn)單,同時(shí)提供了大量的定制選項(xiàng),滿足應(yīng)用程序各種需求。這篇文章主要介紹了jQuery Validate設(shè)置onkeyup驗(yàn)證的相關(guān)資料,需要的朋友可以參考下2016-12-12jQuery實(shí)現(xiàn)的感應(yīng)鼠標(biāo)懸停圖片色彩漸顯效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)的感應(yīng)鼠標(biāo)懸停圖片色彩漸顯效果,涉及jQuery中hover、find、css等方法的使用技巧,需要的朋友可以參考下2015-03-03Jquery實(shí)現(xiàn)帶動(dòng)畫效果的經(jīng)典二級(jí)導(dǎo)航菜單
導(dǎo)航菜單在網(wǎng)頁(yè)中呈現(xiàn)的頻率還是比較多的,因?yàn)樾Ч喈?dāng)不錯(cuò),接下來為大家介紹下使用jquery實(shí)現(xiàn)經(jīng)典二級(jí)導(dǎo)航菜單,各位童鞋們快來圍觀哦2013-03-03JQuery擴(kuò)展插件Validate 5添加自定義驗(yàn)證方法
從前面的示例中不難看出validate中自帶的驗(yàn)證方法足以滿足一般的要求,對(duì)于特別的要求可以使用addMethod(name,method,message)添加自定義的驗(yàn)證規(guī)則,下面的示例中添加了一個(gè)用于正則表達(dá)式驗(yàn)證的擴(kuò)展驗(yàn)證的方法2011-09-09jQuery循環(huán)滾動(dòng)展示代碼 可應(yīng)用到文字和圖片上
循環(huán)滾動(dòng)展示的文字和圖片每個(gè)人都見過,實(shí)現(xiàn)類似效果的 JS 也很多。但如果只用于幾個(gè)條目或三五張圖片,體積龐大的 JS 會(huì)浪費(fèi)資源2012-05-05jquery中focus()函數(shù)實(shí)現(xiàn)當(dāng)對(duì)象獲得焦點(diǎn)后自動(dòng)把光標(biāo)移到內(nèi)容最后
當(dāng)對(duì)象獲得焦點(diǎn)后,自動(dòng)把光標(biāo)移到內(nèi)容最后,使用focus()函數(shù)便可實(shí)現(xiàn),下面有個(gè)不錯(cuò)的示例,感興趣的朋友可以參考下2013-09-09jQuery 防止相同的事件快速重復(fù)觸發(fā)方法
下面小編就為大家分享一篇jQuery 防止相同的事件快速重復(fù)觸發(fā)方法。具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02jQuery+json實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建復(fù)雜表格table的方法
這篇文章主要介紹了jQuery+json實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建復(fù)雜表格table的方法,涉及jQuery針對(duì)json數(shù)據(jù)的解析與表格動(dòng)態(tài)創(chuàng)建操作相關(guān)技巧,需要的朋友可以參考下2016-10-10