javascript - 模拟XHR2文件上传

Question

我有一个 HTML 上传按钮，用于将(多个)文件发送到以 JSON 响应的服务器。根据该回复，我的申请流程将继续。

现在，为了测试我的其余代码(取决于服务器响应)，我想模拟文件上传，这样我就不必在每次重新加载时手动选择和上传新文件。

以下是我的上传方法的简化版本:

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 是一个File - 来自 FileList 的对象.如您所见，我的服务器正在等待 $_FILES['file'] 中的文件。

如果能够模拟一个真实的文件对象被传递到 uploadToServer 中，那将是非常棒的，因为这样我就不必担心我现有的事件，例如 xhr.onload 和 xhr.onprogress 可用。

如果那不可能，我可以创建自定义 uploadToServer 方法并在我的服务器上发送常规 AJAX 请求和假响应。但是，我如何使用事件代码(xhr.onload、xhr.onprogress 等)并将其绑定(bind)到该 AJAX 请求？

Answer 1

您可以通过创建 Canvas 、将其转换为文件并将结果传递给您的方法来模拟文件上传。

1. 创建一个 Canvas :这里是一个漂亮的红色方 block

   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);
   

2. 将其转换为文件并将其传递给您的方法:我使用了 Canvas to Blob以简化测试，但您可能可以提取最基本的内容来满足您的需要。

   canvas.toBlob( function (blob) {
       m.uploadToServer(blob);
   }, 'image/jpeg');
   

还有一把 fiddle http://jsfiddle.net/pvWxx/请务必打开控制台以查看事件和请求。

如果你想用你的 blob 传递一个文件名，你可以传递第三个参数给 formData.append，参见 How to give a Blob uploaded as FormData a file name?和更新的 Fiddle http://jsfiddle.net/pvWxx/1/