文件上传简记

一般我们在表单post数据，都是：

<form method="post" action="http://xxx.com" >
  <input type="text" name="txt1">
  <input type="text" name="txt2">
</form>

此时content-type 默认是 x-www-form-urlencoded

后来post方法支持文件上传，可以向服务器发送二进制数据，此时需要在form标签内显示标记enctype=“multipart/form-data”

并在form中使用type=“file”的input标签。

1 <form action="/postdata" method="post" enctype="multipart/form-data">
2     <input type="text" name="user"  placeholder="username" /><br />
3     <input type="txt" name="city" placeholder="password" /><br />
4     <input type="file"  name="image"  id="upload" /><br />
5     <input type="submit" value="submit" />
6 </form>

可惜使用表单会刷新和跳转。

第二种方式是ajax上传，毕竟ajax有“无刷新”的优势。XMLHttpRequest level2支持发送二进制数据。

ajax上传最常用的一种途径是使用formdata对象

 1 $("#file").on("change", function(){    
 2     var formData = new FormData();    
 3     formData.append("file", $("#file")[0].files);    
 4     formData.append("else", $("#else").val());   
 5      $.ajax({
 6          url: "http://uploadUrl", 
 7          type: "POST", 
 8          data: formData,
 9          processData: false,        
10          contentType: false,        
11          success:function(response){ 
12              //...
13          } 
14    }); 
15  });

当我们需要预览图片时，可以使用H5的FileReader API：

 1 function handleImageFile(file) {
 2        var previewArea = document.getElementById('previewArea');
 3        var img = document.createElement('img');
 4        var fileInput = document.getElementById("myFile");
 5        var file = fileInput.files[0];
 6        img.file = file;
 7        previewArea.appendChild(img);
 8 
 9        var reader = new FileReader();
10        reader.onload = (function(aImg) {
11             return function(e) {
12                  aImg.src = e.target.result;
13             }
14        })(img);
15        reader.readAsDataURL(file);
16 }

由于较低版本的IE不支持formdata，我们可以将form标签的target指向一个隐藏的iframe,这样刷新的只是iframe，将iframe拿到的数据做处理，然后移除iframe就好了。

 1 <body>
 2     <form action="/postdata" method="post" enctype="multipart/form-data" id="theForm">
 3         <input type="text" name="user"  placeholder="username" /><br />
 4         <input type="txt" name="city" placeholder="password" /><br />
 5         <input type="file"  name="image"  id="upload" />
 6         <input type="submit" value="submit" />
 7     </form>
 8     <iframe  frameborder="0" id="hiddenIframe" name="nima" style="height:0px;0px;display:none;"></iframe>
 9     <script>
10         var hf=document.getElementById('hiddenIframe');
11         var f=document.getElementById('theForm');
12         f.target=hf.name;
13         hf.onload=function(){
14             var resData = this.contentDocument.body.textContent || this.contentWindow.document.body.textContent;
15             console.log(resData);
16         }
17     </script>
18 </body>