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等）中的代码绑定到该AJAX请求？

Answer 1

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

创建一个画布：这里是一个漂亮的红色正方形

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/

模拟XHR2文件上传

1 个答案: