HTML5 Ajax上傳和form+iframe的實現2種方法

話說現在很多很多項目需要用到檔案上傳，自從有了HTML5之後，上傳就變的超級簡單了。HTML5支援多圖片上傳，而且支援ajax上傳！而且支援上傳之前圖片的預覽！而且支援圖片拖拽上傳！而且還是純粹利用file控制項實現！而且代碼還超級簡單！！！原諒我這個沒見過世面的人這麼激動==，但是說真的，有這麼多優點，想不讓人稱讚都難啊！

HTML5 Ajax上傳

html5的上傳實現，是需要file控制項以及XMLHttpRequest請求。下面是我使用原生js封裝的一個上傳外掛程式：

代碼如下

複製代碼

function fileUpload(options){  var opts = options || {};  var func = function(){};  this.fileInput = opts.fileInput || null;  this.url = opts.url || '';  this.fileList = [];  this.onFilter = opts.onFilter || function(f){return f;}; //選擇檔案組的過濾方法  this.onSelect = opts.onSelect || func; //檔案選擇後  this.onProgress = opts.onProgress || func; //檔案上傳進度  this.onSuccess = opts.onSuccess || func; //檔案上傳成功時  this.onFailure = opts.onFailure || func; //檔案上傳失敗時;  this.onComplete = opts.onComplete || func; //檔案全部上傳完畢時  this.init(); } fileUpload.prototype = {  dealFiles: function(e){ //擷取要上傳的檔案數組（使用者選擇檔案後執行）  var files = e.target.files || e.dataTransfer.files;  this.fileList = this.onFilter(files);  for(var i = 0, file; file = this.fileList[i]; i++){ //增加唯一索引值  file.index = i;  }  this.onSelect(this.fileList);  return this;  },  removeFile: function(fileDelete){ //刪除某一個檔案  var arrFile = [];  for(var i = 0, file; file = this.fileList[i]; i++){  if (file != fileDelete) {  arrFile.push(file);  }  }  this.fileList = arrFile;  return this;  },  removeAll: function(){ //清空檔案隊列  this.fileList = [];  return this;  },  uploadFile: function(){ //上傳檔案  var me = this;  for(var i = 0, file; file = this.fileList[i]; i++){  (function(file){  var formData = new FormData();  var xhr = new XMLHttpRequest();  if (xhr.upload) {  xhr.upload.addEventListener("progress", function(e){ // 上傳中  me.onProgress(file, e.loaded, e.total);  }, false);  xhr.onreadystatechange = function(e){ // 檔案上傳成功或是失敗  if (xhr.readyState == 4) {  if (xhr.status == 200) {  me.onSuccess(file, xhr.responseText);  me.removeFile(file);  if (!me.fileList.length) {  me.onComplete(); //上傳全部完畢。執行回調  }  } else {  me.onFailure(file, xhr.responseText);  }  }  };  // 開始上傳  formData.append('file', file);  xhr.open("POST", me.url, true);  xhr.send(formData);  }  })(file);  }  },  init: function(){  var me = this;  //檔案選擇控制項選擇  if (me.fileInput) {  me.fileInput.addEventListener("change", function(e){ me.dealFiles(e); }, false);  }  } };

相信大家也看到了，代碼中出現了 FormData ,這就是html5的神奇之處了。藉助FormData輕鬆實現非同步無重新整理支援預覽圖片的多檔案上傳功能。而且，令人欣慰的是，現在已經有很多瀏覽器都已經支援HTML5了。

但是！！！IE9以下的版本不支援呀！！

除此之外，上面的方法還有一個弊端，因為使用了ajax的上傳方式，所以不能支援跨域上傳，如果必須要滿足這兩個業務情境，那就試試下面的方法吧，藉助form和iframe來實現上傳。下面來詳細看一下：

form表單提交到iframe

html代碼:

代碼如下	複製代碼
<iframe name="demoIframe" style="display:none"></iframe> <form target="demoIframe" action="upload.php" method="post" enctype="multipart/form-data">  <input class="filename" type="file" name="fileLabel">  <input type="submit" value="提交"> </form>

我們點擊提交,可以看到下面的請求：

已經把檔案上傳。那麼，加入這個upload.php介面可用，而且假如上傳成功後，會返回：

代碼如下	複製代碼
{  "code": "200",  "success": true,  "data": {  ...  } }

我們要怎麼去擷取傳回值，從而進行下一步的操作呢？因為我們是上傳到了iframe中，所以我們只需要監聽iframe的load事件，如果有傳回值了，我們就能擷取到，從而進行進一步處理。看js代碼：

代碼如下	複製代碼
$('iframe').on('load', function(){  var responseText = $('iframe')[0].contentDocument.body.textContent;  var responseData = JSON.parse(responseText) || {};  if (responseData.isSuccess == true || responseData.code == 200) {  //success  } else {  //error  } });