js无刷新文件上传并获取数据

最近在工作过程中遇到了文件上传的问题，之前的工作中一般采用两种方式：1、form表单直接提交（包括html中直接提交以及js中构造form提交）2、使用jquery上传相关的控件如 Uploadify等，可是这次同事需要实现的是无刷新上传（1直接就pass了（简单form直接提交会导致页面刷新，都懂得，不解释了）），并且上传完之后需要获取返回的json结果，直接建议用jquery控件好了，网上多的是，可是同事不乐意（原因是页面引用的控件太多），结果这个事就落到了我头上。仔细想想好像我也不太清楚怎么做，尤其是需要获取返回json的问题，没辙，只好硬着头皮研究一下jquery上传控件的源码，结果发现还真是可以。大致总结可以有两个方法：

1、form+iframe

form表单的target属性有一个值是framename，这样我们就可以将form表单提交到当前页面的一个隐藏的iframe中，这样就可以实现无刷新，同时可以从iframe中获取返回的数据。

	<iframe name="framename" style="display:none;"></iframe>  
	<form target="framename" method="post" action="XXXXX" enctype ="multipart/form-data">  
		<input type="text" name="username"/>  
		<input type="password" name="password"/>  
		<input type="submit" value=" 提 交 " />  
	</form>  

基本原理就是使用form表单提交，返回值在提交后的页面中展示，至于如何从iframe取出结果，这里就不说了（ajaxfileupload就是基于这个原理做的）

2、使用FormData对象

之所以file不能像form 中的其他表单元素那样将form序列化之后用ajax提交，主要原因在上传文件的实质是传输的二进制文件，但是ajax底层的XMLHttpRequest 并不支持传输二进制文件，可喜可贺的是在XMLHttpRequest Level 2 新增了一个FormData对象，利用它可以提交表单，并且支持二进制数据传输。示例如下

	function fsubmit() {
        	var form=document.getElementById("form1");
        	var fd =new FormData(form);
        	$.ajax({
             		url: "XXXX",
             		type: "POST",
             		data: fd,
             		success: function(response,status,xhr){
                		console.log(xhr);
                		var json=$.parseJSON(response);
                
            		 }
        		});
        	return false;
    		}

注意form表单的enctype必须设为multipart/form-data原因大家都知道，更多关于FormData的用去请查看 点击打开链接。jquery.uploadfile.js就是基于这个原理设计的。

总结：目前基本上主流的jquery的上传控件都是基于这两种原理设计的，只要明白了原理，我们完全可以根据自己的需求，设计上传功能。