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程序设计有所帮助。