作者：在之前的文章中，我们展示了如何通过 input 标签 或 拖放机制 来访问文件。在这两种情况下，您都可以使用 XMLHttpRequest 来上传文件并跟踪上传进度。
演示
如果您正在运行最新的 Firefox 3.6 测试版，请查看我们的 文件上传演示.
上传
XMLHttpRequest 将以二进制数组的形式将给定文件发送到服务器，因此您首先需要使用 File API 将文件内容读入二进制字符串。由于 拖放 和 input 标签都允许您一次处理多个文件，因此您需要创建与文件数量相同的请求。
var reader = new FileReader();
reader.onload = function(e) {
var bin = e.target.result;
// bin is the binaryString
};
reader.readAsBinaryString(file);
文件读取完成后，使用 XMLHttpRequest 将其发送到服务器
var xhr = new XMLHttpRequest();
xhr.open("POST", "upload.php");
xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
xhr.sendAsBinary(bin);
您可以选择在请求过程中发生特定事件（例如错误、成功或中止）时收到通知（有关更多详细信息，请参阅 MDC 文档）。
跟踪上传进度
progress 事件提供了已上传二进制内容的大小。这使您可以轻松地计算已上传的文件百分比。
以下示例显示了到目前为止已上传的文件百分比
xhr.upload.addEventListener("progress", function(e) {
if (e.lengthComputable) {
var percentage = Math.round((e.loaded * 100) / e.total);
// do something
}, false);
关于 Paul Rouget
Paul 是一名 Firefox 开发人员。
27 条评论