Web的幾種上傳方式總結

問題

文件上傳在WEB開發中應用很廣泛。

文件上傳是指將本地圖片、視頻、音頻等文件上傳到服務器上，可以供其他用戶瀏覽或下載的過程。

以下總結了常見的文件（圖片）上傳的方式和要點處理。

表單上傳

這是傳統的form表單上傳，使用form表單的input[type=”file”]控件，可以打開系統的文件選擇對話框，從而達到選擇文件並上傳的目的，它的好處是多瀏覽器兼容，它是web開發者最常用的一種文件上傳方式。

表單的代碼如下：

<form method="post" action="http://uploadUrl" enctype="multipart/form-data">
    <input name="file" type="file" accept="image/gif,image.jpg" />
    <input name="token" type="hidden" />
    <input type="submit" value="提交" /> 
</form>

 

以下是表單上傳幾個關鍵點：

method="post"： 采用post方式提交數據
enctype="multipart/form- data"：采用multipart格式上傳文件，此時request頭會顯示 Content-Type:multipart/form-data; boundary=—-WebKitFormBoundaryzr34cwJ67R95KQC9
action：標明上傳的服務端處理地址
type="file"：使用input的file控件上傳
如果是多文件批量上傳，可以將input[type=”file”]的name屬性設置為如：name=”file[]”
accept屬性是HTML5的新屬性，它規定了可通過文件
上傳提交的文件類型

上傳的觸發事件可以是：input[type=”file”]的onChange觸發，也可以由一個獨立的按鈕的onClick使整個表單提交，此時還可以用input[type="hidden"]帶一些其它的參數，比如Token來源驗證等等。

Ajax無刷新上傳

Ajax無刷新上傳的方式，本質上與表單上傳無異，只是把表單里的內容提出來采用ajax提交，並且由前端決定請求結果回傳后的展示結果，不用像直接表單上傳那樣刷新和跳轉頁面。在這里，我們采用jQuery來作為操作DOM和創建ajax提交的js基礎庫。

html代碼片段如下：

<form>
    <input id="file" name="file" type="file" />
    <input id="token" name="token" type="hidden" />
</form>

 

javascript代碼片段如下：

$("#file").on("change", function(){
  var formData = new FormData();
  formData.append("file", $("#file")[0].files);
  formData.append("token", $("#token").val());
  $.ajax({
      url: "http://uploadUrl",
      type: "POST",
      data: formData,
      processData: false,
      contentType: false,
      success: function(response){
              // 根據返回結果指定界面操作
      }
  });
});

 

我們使用了file控件的change來觸發上傳事件，當然你也可以使用某個按鈕來觸發表單提交。提交數據時，用到了FormData對象來發送二進制文件，FormData構造函數提供的append()方法，除了直接添加二進制文件還可以附帶一些其它的參數， 作為XMLHttpRequest實例的參數提交給服務端。

使用jQuery提供的ajax方法來發送二進制文件，還需要附加兩個參數：

processData: false // 不要對data參數進行序列化處理，默認為true
contentType: false // 不要設置Content-Type請求頭，因為文件數據是以 multipart/form-data 來編碼

Flash上傳

很多時候上傳的需求要求顯示上傳進度、中斷上傳過程、大文件分片上傳等等，這時傳統的表單上傳很難實現這些功能，於是產生了使用Flash上傳的方式，它采用Flash作為一個中間代理層，代替客戶端跟服務端通信，此外，它也對客戶端的文件選擇方面擁有更多的控制權，比input[type=”file”] 要大得多。

在這里我使用了jQuery封裝好的uploadify插件來進行演示，一般這類插件都自帶了上傳用的Flash文件，因為跟服務端回傳的數據和展示跟客戶端的交互，都是Flash文件的接口跟插件來對接的。

<div id="file_upload"></div>

 

html部分很簡單，預留一個hook后，插件會在這個節點內部創建Flash的object，並且還附帶創建了上傳進度、取消控件和多文件隊列展示等界面。

$(function() {
  $("#file_upload").uploadify({
      auto: true,
      method: "Post",
      width: 120,
      height: 30,
      swf: './uploadify.swf',
      uploader: 'http://uploadUrl',
      formData: {
          token: $("#token").val()
      },
      fileObjName: "file",
      onUploadSuccess: function(file, data, response){
          // 根據返回結果指定界面操作
      }
  });
});

 

關於jQuery.uploadify可以訪問了解： http://www.uploadify.com/documentation/ 。值得注意的是flash並不適合手機端應用，更好的解決方案是使用flash+html5來解決平台的兼容性問題。

截圖粘貼上傳

我們發現現在有好多上傳應用已經提供了截圖粘貼上傳功能，如WebUploader，它就支持QQ截圖然后粘貼上傳。

首先，截圖粘貼上傳的核心思想是，監聽粘貼事件，然后獲取剪切板中的數據，如果是一張圖片，則觸發上傳事件。

代碼片段如下：

$("textarea").on("paste", function(e){
   e.stopPropagation();
   var self = this;
   var clipboardData = e.originalEvent.clipboardData;
   if (clipboardData.items.length <= 0) {
       return;
   }
   var file = clipboardData.items[0].getAsFile();
   if (!file) {
       return;
   }
   var formData = new FormData();
   formData.append("file", file);
   formData.append("token", $("#token").val());
   $.ajax({
       url: "http://uploadUrl",
       type: "POST",
       data: formData,
   }).done(function(response) {
       // 根據返回結果指定界面操作
   });
   e.preventDefault();
});

 

從上面代碼可以看出，上傳的過程都是一樣的，主要是獲取文件的方式。 當進行粘貼（右鍵paste/ctrl+v）操作時，觸發剪貼板事件’paste’，從系統剪切板獲取內容，而系統剪切板的數據在不同瀏覽器保存在不同的位置：

IE內核：windows.clipboardData
其它：e.originalEvent.clipboardData

拖拽上傳

拖拽上傳的方式，支持的瀏覽器比較少，因為它用到了HTML5的兩個新的屬性（API）一個是Drag and Drop,一個是File API。

上傳域監聽拖拽的三個事件：dragEnter、dragOver和drop，分別對應拖拽至、拖拽時和釋放三個操作的處理機制，當然你也可以監聽dragLeave事件。

HTML5的File API提供了一個FileList的接口，它可以通過拖拽事件的e.dataTransfer.files來傳遞的文件信息，獲取本地文件列表信息。

File API在HTML5規范中只是草案，在 W3C 草案中，File 對象只包含文件名、文件類型和文件大小等只讀屬性。但部分瀏覽器在草案之外提供了一個名為 FileReader 的對象，用以讀取文件內容，並且可以監控讀取狀態，它提供的方法有： “readAsBinaryString” ，”readAsDataURL” ，”readAsText” ，”abort” 等。

代碼片段如下：

// dragenter
$("#textarea").on("dragenter", function(e){
    e.preventDefault();
});
// dragover
$("#textarea").on("dragover", function(e){
    e.preventDefault();
});
// drop
$("#textarea").on("drop", function(e){
    e.stopPropagation();
    e.preventDefault();
    var files = e.originalEvent.dataTransfer.files;
    _.each(files, function(file) {
        if (!/^image*/.test(file.type)) {
          return;
        }
        var fileReader = new FileReader();
        fileReader.onload = function() {
          //uploadFile(file);
        };
        fileReader.readAsDataURL(file);
    });
});

 

拖拽上傳過程中的幾個關鍵點：

在drop事件觸發后通過e.dataTransfer.files獲取拖拽文件列表，在jQuery中是e.originalEvent.dataTransfer.files
拖拽上傳僅支持圖片，文件對象中file.type標識了文件類型。
由於可能是多圖拖拽，所以可以遍歷圖片上傳，這里用了Underscore的each方法。
這里用readAsDataURL讀取文件內容為二進制文件，你還可以將其轉換為Base64方式上傳，只是http協議里面存在對非二進制數據的上傳大小限制為2M。
上傳的過程跟前面的方式相同，即：創建FormData對象並發起Ajax請求。
拍照上傳

拍照上傳可以是PC上的攝像頭拍照上傳也可以是手機等移動設備的拍照上傳。手機上的拍照上傳最常見就是我們使用微信發照片了。

手機實現拍照上傳的代碼：

<input type=file accept="image/*">
<input type=file accept="video/*">

ios 有拍照、錄像、選取本地圖片功能，部分android只有選取本地圖片功能。

上傳與安全

上傳文件時必須做好文件的安全性，除了前端必要的驗證，如文件類型、后綴、大小等驗證，重要的還是要在后台做安全策略。

這里我列舉幾個注意點：

• 后台需要進行文件類型、大小、來源等驗證
• 定義一個.htaccess文件，只允許訪問指定擴展名的文件。
• 將上傳后的文件生成一個隨機的文件名，並且加上此前生成的文件擴展名。
• 設置上傳目錄執行權限，避免不懷好意的人繞過如圖片擴展名進行惡意攻擊，拒絕腳本執行的可能性。