文件上传简记
一般我们在表单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;width: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>
