ajax文件上传（非按钮提交）

前言

作为小白新手总是会遇到各种问题，由于对Ajax不熟悉，造成了文件上传遇到提交没反应，请求页面报错。
经过查资料一番折腾总算知道怎么解决了。
为了加深印象把自己遇到的问题记录下来。
我的问题主要是不知道Ajax是怎么传递文件数据的。
请求报错老是提示参数不正确。Uncaught TypeError: Illegal invocation
下面是总结代码：

静态页面代码

 <form id="staffpthoto" enctype="multipart/form-data">  	
	     <input id="file1" type="file" name="file"/>
	     <span>上传头像</span>	
  </form>

ajax如何获取文件

$("#file1").on("change",function(){		 
			  alert("test2");
			  $.ajax({
				  	url:"upload",//提交到的地址(我这里是提交到控制器)
	  			  	dataType:"json",//数据格式
	  				type:"post",//提交方式
	  				data: new FormData($("#staffpthoto")[0]),//获取要上传的文件（重点）
	  				cache: false,
	  				contentType: false,
	  	            processData: false,
	  				success:function(imgName){
	  					alert(imgName);
	  						//这里根据自身情况对返回的数据进行操作
	  						//$("#img").attr("src","http://localhost/static/images/"+imgName);
	  				}
			  })
	  }); 
  }) 

这里重点在于new FormData($("#staffpthoto")[0])；通过这种方式，会把表单里的内容通过key-value形式来封装，所以这里把要上传的文件放在from里面，直接new FormData():把表单通过选择器直接构建进去。