常见Web文件上传方法总结

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){
 		 //表单提交成功之后的操作
		}
		
	})
})