我有一个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参数fileFile中的FileList对象。如您所见,我的服务器正在等待$_FILES['file']内部的文件。

如果a可以模拟将真实的File对象传递到uploadToServer中,那将是非常棒的,因为这样我就不必担心我现有的事件(例如xhr.onloadxhr.onprogress)是否可用。

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

最佳答案

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


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

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?和更新的Fiddle http://jsfiddle.net/pvWxx/1/

关于javascript - 模拟XHR2文件上传,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/14293462/

10-12 12:28
查看更多