1、使用JQuery.form.js的ajaxSubmit()通过提交表单来上传文件。
ajaxSubmit()适用于事件机制以ajax提交form表单的方式进行文件上传,ajaxSubmit()依赖于事件,只要有事件存在就能使用该方法,只需要指定form表单的action属性即可,不需要提供submit按钮。
示例代码:
`<form id="addLicenseInfoForm" action="表单提交url" method="post" novalidate enctype="multipart/form-data">
<input id="reqFile" name="reqFile" type="file" class="form-control">
<button id="addLicenseInfoButton" type="button" class="btn btn-primary col-md-offset-2" style="">添加</button>
<script>
$("#addLicenseInfoButton").click(function() {
$.ajaxSubmit({
success:function(data){
//上传成功之后的操作
}
})
})
</script>`
novalidate属性规定当对表单提交时不对其进行验证
2、使用FormData对象进行文件上传,使用简单,缺点:IE10以下浏览器不兼容
示例代码:
$("#reqFile").change(function(){
var params=new FormData();//初始化一个FormData对象
params.append("reqFile",$("#reqFile")[0].files[0]);
$.ajax({
url:"提交URL",
type:"post",
data:params,
dataType:"json",
processData: false,//避免JQuery对其进行操作,使得服务器不能正常解析文件
contentType: false,//避免JQuery对其进行序列化操作
success:function(data){
//文件上传成功之后的操作
}
})
})
3、为了解决IE浏览器的兼容性,可以使用jquery的插件ajaxFileUpload()进行文件上传。使用ajaxFileUpload进行文件上传首先要引入相应的js,ajaxFileUpload使用与JQuery版本有一定的关系,要使用与JQuery版本一致的ajaxFileUpload.js,以下是我使用的js
<script src="js/jQuery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/ajaxfileupload.js"></script>
ajaxFileUpload文件上传示例代码:
$("#reqFile").change(function(){
$.ajaxFileUpload({
url:"提交URL",
type:"post",
dataType:"text",
fileElementId:'reqFiles',//需要上传文件域的ID
secureuri: false, //是否需要安全协议,一般为false
success : function(data){
//文件上传成功操作
}
})
})
ajaxFileUpload.js可以直接在官网上面下载
使用ajaxFileUpload()进行文件上传虽然解决了浏览器的兼容性,但是,若是后台返回Json数据,IE会出现下载框,解决下载框问题,在后台设置:
response.setContentType(“text/html;charset=UTF-8”);
前台:dataType:‘text’
4、解决IE浏览器的兼容性的问题,可以使用ajaxSubmit()进行表单提交,使用$(“#form表单的ID”).serialize()进行表单提交
示例代码:
$("#reqFile").change(function(){
$("#addLicenseInfoForm").ajaxSubmit({
url:"表单提交URL",
type:"post",
data:$("#addLicenseInfoForm").serialize(),
dataType:"text",
success:function(data){
//表单提交成功之后的操作
}
})
})