我有一个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']
内部的文件。如果a可以模拟将真实的File对象传递到
uploadToServer
中,那将是非常棒的,因为这样我就不必担心我现有的事件(例如xhr.onload
和xhr.onprogress
)是否可用。如果那不可能,我可以创建一个自定义的
uploadToServer
方法并在服务器上发送常规的AJAX请求和假响应。但是,然后如何使用事件中的代码(xhr.onload
,xhr.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/