我正在尝试使用 HTML5 制作一个带有进度表的文件上传器。这是我的代码：
<!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）上。
这是我的代码，它对我来说工作得很好：
xhr.upload.onprogress = function(e){
var done = e.position || e.loaded, total = e.totalSize || e.total
var present = Math.floor(done/total*100)
document.getElementById('status').innerHTML = present + '%'
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
