javascript实现iframe无刷新上传文件

许多系统都会有上传图片这个功能，但是如果是用form表单提交的话，每次都会刷新页面，这样体验很不好；
今天分享一个利用iframe实现无刷新上传文件的方法，直接上代码：

html

<form class="form-horizontal text-sm" id="upload" name="upload[]" target="frm" action="/ERP/files/upFiles" method="post" enctype="multipart/form-data">
 <input type='file' id="file" name="files[]" accept=".csv" multiple="multiple" />
 <input type="hidden" name="MAX_FILE_SIZE" value="10485760" />  //限制文件大小
</form>
<iframe id='frm' name='frm' style="display: none;"></iframe>

代码

javascript

<script type="text/javascript">
 function callback(res){
   console.log(res);  //返回的对象
 }
 var frm = $("#frm");
 frm.load(function(){
   var wnd = this.contentWindow;
   var str = $(wnd.document.body).find("pre").html();
   str=JSON.parse(str);  //将json字符串数据转换成对象Object
   callback(str);
 });
</script>

原理：认真看的同学会发现，此处的iframe是隐藏的，此方法就是通过隐藏的iframe来提交数据，所以原来的页面就不会被刷新了；