本文實例講述了jQuery+ajax簡單實現文件上傳的方法。分享給大家供大家參考，具體如下：
可以通過ajax來提交表單，而不會刷新頁面。主要使用的方法是 $("#formID").ajaxSubmit()方法。
1、要引入js插件
需要下載的附件：jquery.form.js
2、頁面代碼：
<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);}更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jquery中Ajax用法總結》、《jQuery切換特效與技巧總結》、《jQuery拖拽特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》、《jquery選擇器用法總結》及《jQuery常用插件及用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
