我正在尝试使用HTML5制作一个带有进度条的文件上传器。这是我的代码:
基本上,在我所有的浏览器上,当我选择要上传的文件时,进度事件会触发并立即显示整个传输完成。然后它坐在那里,而文件实际上传需要一些秒/分钟,具体取决于文件大小,服务器响应后脚本会弹出警告并显示适当的响应。
我是否遗漏了一些明显的东西?就我所看到的,这在我所有的浏览器上都发生(IE10、Chrome 28、FF22)。
<!DOCTYPE html>
<html>
<head>
<title>Test Progress Meter</title>
<script type="text/javascript">
function submitFile(){
var blobOrFile = document.getElementById("fileInput").files[0];
var xhr = new XMLHttpRequest();
xhr.onload = function(e) {
alert("finished!");
};
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
document.getElementById("statusBox").innerHTML = e.loaded + " / " + e.total;
}
};
xhr.open('POST', 'test.php', true);
xhr.send(blobOrFile);
};
</script>
</head>
<body>
<input type="file" id="fileInput" onchange="submitFile();" />
Status: <span id="statusBox"></span>
</body>
</html>
基本上,在我所有的浏览器上,当我选择要上传的文件时,进度事件会触发并立即显示整个传输完成。然后它坐在那里,而文件实际上传需要一些秒/分钟,具体取决于文件大小,服务器响应后脚本会弹出警告并显示适当的响应。
我是否遗漏了一些明显的东西?就我所看到的,这在我所有的浏览器上都发生(IE10、Chrome 28、FF22)。