談談基於iframe、FormData、FileReader三種無刷新上傳檔案的方法_javascript技巧

發送請求有兩種方式，一種是用ajax，另一種是用form提交，預設的form提交如果不做處理的話，會使頁面重定向。以一個簡單的demo做說明：

     html如下圖所示，請求的路徑action為"upload"，其它的不做任何處理：

 <form method="POST" action="upload" enctype="multipart/form-data">
  名字 <input type="text" name="user"></input>
  头像 <input type="file" name="file"></input>
  <input type="submit" id="_submit" value="提交"></input>
 </form> 

      服務端(node)response直接回傳: "Recieved form data"，示範如下：

       可看到預設情況下，form請求upload的同時重新導向至upload。但是很多情況下是希望form請求像ajax一樣，不會重定向或刷新頁面。像上面的場景，當上傳完成之後，將使用者選擇的頭像顯示在目前頁面。

      解決方法第一種是使用html5的FormData，將form裡面的資料封裝到FormData物件裡，再以POST的方式send出去。如下面程式碼所示，對提交按鈕的點選事件做一個回應，程式碼第6行取得到form的DOM對象，然後第8行建構一個FormData的實例，第18行，將form資料傳送出去。

document.getElementById("_submit").onclick = function(event){
   //取消掉默认的form提交方式
   if(event.preventDefault) event.preventDefault();
   else event.returnValue = false;       //对于IE的取消方式
   var formDOM = document.getElementsByTagName("form")[];
   //将form的DOM对象当作FormData的构造函数
   var formData = new FormData(formDOM);
   var req = new XMLHttpRequest();
   req.open("POST", "upload");
   //请求完成
   req.onload = function(){
    if(this.status === ){
      //对请求成功的处理
    }
   }
   //将form数据发送出去
   req.send(formData);
　　　　　　 //避免内存泄漏
　　　　　　 req = null;
 } 

      成功上傳後，服務將返回圖片的存取地址，補充14行對請求成功的處理：在submit按鈕的上方位置顯示上傳的圖片：            

var img = document.createElement("img");
     img.src = JSON.parse(this.responseText).path;
     formDOM.insertBefore(img, document.getElementById("_submit")); 

      範例： 

      如果使用jQuery，可以把formData當作ajax的data參數，同時設定contentType: false和processData: false，告訴jQuery不要去處理請求頭和傳送的資料。

      看起來這種提交方式跟ajax一樣，但是其實並不是完全一樣，form提交的資料格式有三種，如果要上傳文件則必須為multipart/form-data，所以上面的form提交請求裡的http的頭資訊裡面的Content-Type為multipart/form-data，而普通的ajax提交為application/json。 form提交完整的Content-Type如下：

"content-type":"multipart/form-data; boundary=------WebKitFormBoundaryYOE7pWLqdFYSeBFj"

       除了multipart/form-data之外，也指定了boundary，這個boundary的功能是用來區分不同的欄位。由於FormData物件是不透明的，呼叫JSON.stringify將會傳回一個空的物件{}，同時FormData只提供append方法，所以無法得到FormData實際上傳的內容，但是可以透過分析工具或服務收到的資料來查看。在上面如果上傳一個文字文件，那麼服務收到的POST資料的原始格式是這樣的：

------WebKitFormBoundaryYOE7pWLqdFYSeBFj

Content-Disposition: form-data; name="user"

abc

------WebKitFormBoundaryYOE7pWLqdFYSeBFj

Content-Disposition: form-data; name="file"; filename="test.txt"
Content-Type: text/plain

這是一個文字檔案的內容。

------WebKitFormBoundaryYOE7pWLqdFYSeBFj--

     從上述服務收到的資料看出FormData提交的格式，每個欄位以boundary隔開，最後以--結束。而ajax請求，send出去的資料格式是自訂的，一般都是以key=value中間用&連接：

 var req = new XMLHttpRequest();
  var sendData = "user=abc&file=这是一个文本文件的内内容";
  req.open("POST", "upload");
  //发送的数据需要转义，见上面提到的三种格式
  req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  req.send(sendData); 

服务就会收到和send发出去的字符串一模一样的内容，然后再作参数解析，所以就得统一参数的格式：

user=abc&file=这是一个文本文件的内容

从这里可以看出POST本质上并不比GET安全，POST只是没有将数据放在网址传送而已。

考虑到FormData到了IE10才支持，如果要支持较低版本的IE，那么可以借助iframe。

文中一开始就说，默认的form提交会使页面重定向，而重定向的规则在target中指定，可以和a标签一样指定为"_blank"，在新窗口中打开；还可以指定为一个iframe，在该iframe中打开。所以可以弄一个隐藏的iframe，将form的target指向这个iframe，当form请求完成时，返回的数据就会由这个iframe显示，正如上面在新页面显示的："Recieved form data"。请求完成后，iframe加载完成，触发load事件，在load事件的处理函数里，获取该iframe的内容，从而拿到服务返回的数据了！拿到后再把iframe删掉。

在提交按钮的响应函数里，首先创建一个iframe，设置iframe为不可见，然后再添加到文档里：

var iframe = document.createElement("iframe");
  iframe.width = 0;
  iframe.height = 0;
  iframe.border = 0;
  iframe.name = "form-iframe";
  iframe.id = "form-iframe";
  iframe.setAttribute("style", "width:0;height:0;border:none");
  //放到document
  this.form.appendChild(iframe); 

改变form的target为iframe的name值：

 this.form.target = "form-iframe"; 

然后再响应iframe的load事件：

 iframe.onload = function(){
   var img = document.createElement("img");
   //获取iframe的内容，即服务返回的数据
   var responseData = this.contentDocument.body.textContent || this.contentWindow.document.body.textContent;
   img.src = JSON.parse(responseData).path;
   f.insertBefore(img, document.getElementById("_submit"));
   //删掉iframe
   setTimeout(function(){
    var _frame = document.getElementById("form-iframe");
    _frame.parentNode.removeChild(_frame);
   }, 100);
   //如果提示submit函数不存在，请注意form里面是否有id/value为submit的控件
   this.form.submit();
  } 

第二种办法到这里就基本可以了，但是如果看163邮箱或者QQ邮箱上传文件的方式，会发现和上面的两种方法都不太一样。用httpfox抓取请求的数据，会发现上传的内容的格式并不是上面说的用boundary隔开，而是直接把文件的内容POST出去了，而文件名、文件大小等相关信息放在了文件的头部。如163邮箱：

POST Data:

this is a text

Headers:

Mail-Upload-name: content.txt
Mail-Upload-size: 15

可以推测它们应该是直接读取了input文件的内容，然后直接POST出去了。要实现这样的功能，可以借助FileReader，读取input文件的内容，再保留二进制的格式发送出去：

 var req = new XMLHttpRequest();
   req.open("POST", "upload");
   //设置和邮箱一样的Content-Type
   req.setRequestHeader("Content-Type", "application/octet-stream");
   var fr = new FileReader();
   fr.onload = function(){
    req.sendAsBinary(this.result);
   }
   req.onload = function(){
     //一样，省略
   }
　　  //读取input文件内容，放到fileReader的result字段里
   fr.readAsBinaryString(this.form["file"].files[0]); 

代码第13行执行读文件，读取完毕后触发第6行的load响应函数，第7行以二进制文本形式发送出去。由于sendAsBinary的支持性不是很好，可以自行实现一个：

 if(typeof XMLHttpRequest.prototype.sendAsBinary === 'undefined'){
  XMLHttpRequest.prototype.sendAsBinary = function(text){
  var data = new ArrayBuffer(text.length);
  var uia = new UintArray(data, );
  for (var i = ; i < text.length; i++){ 
   uia[i] = (text.charCodeAt(i) & xff);
  }
  this.send(uia);
  }
 } 

代码的关键在于第6行，将字符串转成8位无符号整型，还原二进制文件的内容。在执行了fr.readAsBinaryString之后，二进制文件的内容将会以utf-8的编码以字符串形式存放到result，上面的第6行代码将每个unicode编码转成整型(&0xff或者parseInt)，存放到一个8位无符号整型数组里面，第8行把这个数组发送出去。如果直接send，而不是sendAsBinary，服务收到的数据将无法正常还原成原本的文件。

上面的实现需要考虑文件太大，需分段上传的问题。

关于FileReader的支持性，IE10以上支持，IE9有另外一套File API。

文章讨论了3种办法实现无刷新上传文件，分别是使用iframe、FormData和FileReader，支持性最好是的iframe，但是从体验的效果来看FormData和FileReader更好，因为这两者不用生成一个无用的DOM再删除，其中FormData最简单，而FileReader更加灵活。

下面给大家介绍iframe无刷新上传文件

form.html
<form enctype="multipart/form-data" method="post" target="upload" action="upload.php" > 
<input type="file" name="uploadfile" />
<input type="submit" /> 
</form> 
<iframe name="upload" style="display:none"></iframe> 

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

顯示更多

熱門文章

如何修復KB5055523無法在Windows 11中安裝？

4 週前 By DDD

如何修復KB5055518無法在Windows 10中安裝？

4 週前 By DDD

<🎜>：種植花園 - 完整的突變指南

3 週前 By DDD

<🎜>：泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙

3 週前 By 尊渡假赌尊渡假赌尊渡假赌

如何修復KB5055612無法在Windows 10中安裝？

3 週前 By DDD

顯示更多

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

Java教學

1664

14

CakePHP 教程

1423

52

Laravel 教程

1317

25

PHP教程

1268

29

C# 教程

1242

24

顯示更多