模擬XHR2文件上傳

我有一個HTML上傳按鈕，用於將（多個）文件發送到使用JSON響應的服務器。基於這種迴應，我的申請流程繼續進行。模擬XHR2文件上傳

現在，爲了測試我的代碼的其餘部分（取決於服務器的響應），我想模擬文件上傳，這樣我就不必在每次重新加載時手動選擇並上傳新文件。

以下是我上傳方法的簡化版本：

uploadToServer: function (file) { 

    var self = this, 
     data = new FormData(), 
     xhr = new XMLHttpRequest(); 

    // When the request has successfully completed. 
    xhr.onload = function() { 
     var response = $.parseJSON(this.responseText); 

     var photo = new App.Models.Photo({ 
      filename: response.filename, 
      name: response.uuid 
     }); 

     var photoView = new App.Views.Photo({ model: photo }); 

     $('.photos').append(photoView.render().el); 
    }; 

    // Send to server, where we can then access it with $_FILES['file]. 
    data.append('file', file); 
    xhr.open('POST', this.url); 
    xhr.send(data); 
}

的uploadToServer參數file從FileList一個File -object。正如你所看到的，我的服務器正在等待$_FILES['file']中的文件。

這將是真棒，如果可以模擬一個真實的文件對象被傳遞到uploadToServer，因爲我再也不擔心我現有的事件，如xhr.onload和xhr.onprogress可用。

如果這樣做不可行，我可以創建自定義uploadToServer方法，並在我的服務器上發送常規的AJAX請求和假響應。但是，我該如何使用綁定我的事件（xhr.onload，xhr.onprogress等）的代碼到該AJAX請求？

來源

2013-01-12 John B.

您可以通過創建畫布模擬文件上傳，將其轉換爲文件並將結果傳遞給您的方法。

創建畫布：在這裏，一個漂亮的紅方

var canvas = document.createElement('canvas'), 
    ctx = canvas.getContext("2d"); 

canvas.width = 100; 
canvas.height = 100; 
ctx.fillStyle = '#ff0000'; 
ctx.fillRect(0, 0, 100, 100); 

document.body.appendChild(canvas);

將其轉換爲一個文件，並把它傳遞給你的方法：我以前Canvas to Blob簡化測試，但你也許可以提取光禿禿的骨頭以適應您的需求。
```
canvas.toBlob(function (blob) { 
    m.uploadToServer(blob); 
}, 'image/jpeg'); 
```

並有小提琴http://jsfiddle.net/pvWxx/一定要打開控制檯看到事件和請求。

如果你想通過你的blob文件名，你可以傳遞一個第三個參數formData.append，看到How to give a Blob uploaded as FormData a file name?和更新的小提琴http://jsfiddle.net/pvWxx/1/

來源

2013-01-12 13:24:28 nikoshr

非常感謝nikoshr，我還沒有聽說過呢。我發現一個Blob構造函數也適用，而不是Canvas-to-Blob.js。你有沒有機會知道如何傳遞文件名？因爲'_FILES ['file'] ['name']'總是讀取_blob_。 –

對於畫布到Blob，我玩它安全:)看起來似乎formData.append接受第三個參數，一個文件名。 'formData.append（'file'，blob，fileName）;'參見http://stackoverflow.com/questions/6664967/how-to-give-a-blob-uploaded-as-formdata-a-file-name – nikoshr

模擬XHR2文件上傳

回答

相關問題