无刷新上传文件

一般除了Ajax异步提交文件，传统的文件上传都需要form submit，那么就会产生一个表单刷新的现象，那么这样给用户的体验很不好，有一个解决办法是通过一个隐藏的iframe来处理上传操作
我采用的是ReactJS,amazeui,nodejs
1.html target指向iframe的name,就是把上传后的操作交给iframe来处理

   

       
            选择要上传的文件
       
       
   
                                    
   

2.JS处理当文件选择后提交form

UploadSupplyer:function(){
   var path = document.all.fileUp.value;
   if(!path){return false;}
   $('.loadinfo').html('
文件上传中...
').removeClass("none");
   $('#supplyformFile').submit();
},

3.nodejs服务器处理,因为处理页面是nodejs服务器域，iframe中存在跨域的问题,所以需要用到H5的postMessage方法来传递参数给iframe外面的表单页面

var fname = req.files.fileUp.path.replace("publicfiles", "").replace("public/files/", "");
res.writeHead(200, {'Content-type' : 'text/html'});
res.write('');

4.JS处理上传结果

window.addEventListener('message',function(e){
   var fname=e.data;
   $('#supplyfile').val(fname);
   $(".loadinfo").addClass("none");
   $(".successinfo").html("
文件上传成功
").removeClass("none");
   setTimeout(function() { $(".successinfo").addClass("none");}, 2000);
   $("#supplyfile_div").html(' 供应商确认单');
},false);