通过按钮触发并利用ajax上传文件

背景

当时公司的一个前端上传插件和移动端的框架（SUI）出现了冲突，点击插件的时候无法进行上传文件（连上传文件的选框都没有弹出。）因此可以判断为，通过插件生成的input type="file"没有触发，在不影响公司前段框架以及样式的条件下，我选择了通过js和jquery来实现文件的上传。

代码

注：需要引入Jquery

1. 首先我弄一个上传的按钮，和一个隐藏的上传文件的input（公司的样式，我从原则上不能把实际的代码展现，只能尽量还原）

<button>上传</button>
<input type="file" style="display:none;" id="file" />

2. 为上传按钮增加点击事件upload()，并在js中写好对应的方法。

<button onclick="upload();">上传</button>

<script  type="text/javascript">
	function upload(){
	
	}
</script>

3. 在upload()中增加触发input点击事件

<script  type="text/javascript">
	function upload(){
		$("#file").click();
	}
</script>

4. 写input的点击事件触发后执行的方法，通过ajax提交。

$("#file").click(function(){
	var formData = new FormData();
	formData.append("crowd_file",$('#uploader_excel')[0].files[0]);
	console.log(formData);

	$.ajax({
	        url:'',
	        dataType:'json',
	        type:'POST',
	        async: false,
	        data: formData,
	        timeout:5000,
	        processData : false, // 使数据不做处理
	        contentType : false, // 不要设置Content-Type请求头
	        success: function(data){
	        	console.log("success");
	            // location.reload();//页面刷新.
	        },
	        error:function(){
	        	console.log("错误");
	        }
	    });
});

结尾

本篇博客实现的只是单个文件的上传，多个文件暂时没有尝试。如有问题，请随时私信我。