模拟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文件上传

回答

相关问题