Javascript 模拟XHR2文件上传

我有一个HTML上传按钮，可以向服务器发送（多个）文件，服务器用JSON响应。基于该响应，我的应用程序流程将继续

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

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

uploadToServer:函数（文件）{
var self=这个，
数据=新表单数据（），
xhr=newXMLHttpRequest（）；
//当请求成功完成时。
xhr.onload=函数（）{
var response=$.parseJSON（this.responseText）；
var photo=新的App.Models.photo({
filename:response.filename，
名称：response.uuid
});
var photoView=newapp.Views.Photo（{model:Photo}）；
$（'.photos'）.append（photoView.render（）.el）；
};
//发送到服务器，在那里我们可以使用$_FILES['file]访问它。
data.append（'file'，file）；
xhr.open（'POST'，this.url）；
发送（数据）；
}

uploadToServer

参数

file

是来自的-object。如您所见，我的服务器正在等待

$\u FILES['file']

中的文件

如果a可以模拟一个真正的文件对象被传递到

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.toBlob( function (blob) {
    m.uploadToServer(blob);
}, 'image/jpeg');

和小提琴一定要打开控制台查看事件和请求

---

如果您想通过blob传递文件名，可以将第三个参数传递给

formData.append

，查看并更新Fiddle

，非常感谢Nikosh，我还没有听说过。我发现Blob构造函数也可以工作，而不是Canvas-to-Blob.js。你知道我如何传递文件名吗？因为

$\u FILES['file']['name']

总是读取blob。对于从画布到blob，我很安全：）它看起来像formData.append接受第三个参数，即文件名<代码>formData.append（'file'，blob，fileName）参见