jQuery+ajax简单实现文件上传的方法

2019-11-20 09:48:44

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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程序设计有所帮助。

上一篇：JS中使用变量保存arguments对象的方法

下一篇：JS使用eval()动态创建变量的方法