jQuery+ajax简单实现文件上传的方法
本文实例讲述了jQuery+ajax简单实现文件上传的方法。分享给大家供大家参考,具体如下:
可以通过ajax来提交表单,而不会刷新页面。主要使用的方法是$("#formID").ajaxSubmit()方法。
1、要引入js插件
需要下载的附件:jquery.form.js
2、页面代码:
<scriptsrc="project/js/jquery.form.js"type="text/javascript"></script> <scriptsrc="project/js/fileload.js"type="text/javascript"></script> <scripttype="text/javascript"> $(document).ready(function(){ createHtml($("#str")); }) </script> <tr> <td>图片</td> <td> <divid="str"> </div> <pstyle="display:none;"id="timgUrl"></p> <pstyle="color:red"id="timgok"></p> <imgid="backImgUrl"src="@Model.ImageUrl"style="width:300px;height:200px;"/></td> </tr> <scriptsrc="~/project/js/jquery.form.js"type="text/javascript"></script> <scriptsrc="~/project/js/fileload.js"type="text/javascript"></script>
fileload.js:
functionfileloadon(){ $("#msg").html(""); $("#_fileForm").submit(function(){ $("#_fileForm").ajaxSubmit({ type:"post", url:"/201410CarVideoAdmin/Home/UploadHelper", success:function(data1){ $('#timgUrl').html(data1); varreg=newRegExp('"',"g"); varimageUrl=$('#timgUrl').text().replace(reg,""); $('#backImgUrl').attr("src",imageUrl); if($('#timgUrl').html()!=null){ $('#timgok').html("文件上传成功"); }else{ $('#timgok').html("文件上传失败"); } }, error:function(msg){ alert("文件上传失败"); } }); returnfalse; }); $("#_fileForm").submit(); }
ControllerCode:
[HttpPost] publicActionResultUploadHelper() { //开始上传 stringimageUrl=string.Empty; QF.WebGamePlatform.Reference.FileUploadServiceservice=newQF.WebGamePlatform.Reference.FileUploadService(); varfileResult=service.PicUpLoad(Request.Files[0]); if(fileResult.Code==0) { imageUrl=fileResult.Data.RawImageUrl; } returnJson(imageUrl,JsonRequestBehavior.AllowGet); }
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jquery中Ajax用法总结》、《jQuery切换特效与技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。