1

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

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

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

4

1 回答 1

2

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

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

  2. 将其转换为文件并将其传递给您的方法：我使用Canvas to Blob来简化测试，但您可能可以提取裸露的骨骼以满足您的需求。

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

还有一个 Fiddle http://jsfiddle.net/pvWxx/一定要打开控制台查看事件和请求。

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

于 2013-01-12T13:24:28.730 回答