模拟XHR2文件上传 [英] Simulate XHR2 file upload

问题描述

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

I have a HTML upload button to send (multiple) files to a server which responds with JSON. Based on that response, my application flow continues.

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

Now, to test the rest of my code (dependent on the server response), I would like to simulate the file upload so that I do not have to manually select and upload new files on every reload.

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

Following is a simplified version of my upload method:

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

The uploadToServer parameter file is a File-object from FileList. And as you can see, my server awaits the file inside of $_FILES['file'].

如果 a 可以模拟一个真正的 File 对象被传递到 uploadToServer 那就太棒了，因为这样我就不必担心我现有的事件，例如 xhr.onload 和 xhr.onprogress 可用.

It would be awesome if a could simulate a real File-object being passed into uploadToServer, since I then do not have to worry about my existing events such as xhr.onload and xhr.onprogress being available.

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

If that won't be possible, I could create a custom uploadToServer method and send a regular AJAX-request and fake-respond on my server. But how can I then use and bind the code from my events (xhr.onload, xhr.onprogress etc.) to that AJAX-request?

推荐答案

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

You could simulate a file upload by creating a canvas, converting it to a file and passing the result to your method.

1. 创建一个画布:这里是一个漂亮的红色方块

1. Create a canvas : here, a nice red square

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

将其转换为文件并将其传递给您的方法:我使用了 画布到 Blob 以简化测试，但您可能可以提取裸露的骨骼以满足您的需要.

Convert it to a file and pass it to your method: I used Canvas to Blob to simplify the test but you probably can extract the bare bones to fit your needs.

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

和小提琴 http://jsfiddle.net/pvWxx/ 一定要打开一个控制台查看事件和请求.

And a Fiddle http://jsfiddle.net/pvWxx/ Be sure to open a console to see the events and the request.

如果您想通过 blob 传递文件名，可以将第三个参数传递给 formData.append，请参阅 如何为作为 FormData 上传的 Blob 提供文件名? 和更新的 Fiddle http://jsfiddle.net/pvWxx/1/

If you want to pass a filename with your blob, you can pass a third argument to formData.append, see How to give a Blob uploaded as FormData a file name? and an updated Fiddle http://jsfiddle.net/pvWxx/1/

这篇关于模拟XHR2文件上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！