我正在编写一个上传脚本,它将获取一个文件,对其进行处理,然后将其返回给用户。处理过程可能需要几分钟时间。我目前正在做的事情是向用户提供反馈,在实际上传期间显示一个上传栏,并在上传完成后将其替换为“正在处理”消息。文件处理完成后,该消息将替换为新文件的链接。这在 Chrome 中工作得很好,但在 Firefox 中,我只能将进度条调到 99.9%。有没有办法在关闭连接之前检查上传是否完成?
这是我目前拥有的
outter = $(".item_box")[0];//content wrapper
inner = outter.children[0];//content viewer, will be replaced with messages and content
var p = document.createElement("progress");
p.className = "uploadprogress";
p.value = "0";
p.max = "100";
inner.textContent = "";
inner.appendChild(p);//replace initial "click here" message with progress bar
var formData new FormData();
for (var i = 0; i < files.length; i++)//files is defined elsewhere and contains form data
{
formData.append('userfile', files[i]);
}
// now post a new XHR request
var xhr = new XMLHttpRequest();
xhr.open('POST', base_url+'upload/upload_media');//url of php script
xhr.responseType = "json";
xhr.onreadystatechange = function () {
if (xhr.readyState == 4)//ajax request complete
{
p.value = p.innerHTML = 100;//set progress bar to 100%
var data = JSON.parse(xhr.responseText);//my returned json object
outter.removeChild(inner);
var v = document.createElement("video");
v.controls = "controls";
v.innerHtml = data.msg;
outter.appendChild(v);
}
}
xhr.upload.onprogress = function (e)//handles progress bar value
{
if (e.lengthComputable)
{
var done = e.position || e.loaded, total = e.totalSize || e.total;
p.value = p.innerHTML = (Math.floor(done/total*1000)/10);
if (done == 100)//this never happens in firefox
{
inner.removeChild(p);
inner.textContent = "processing... please wait";
}
}
}
xhr.send(formData);
最佳答案
这是 Firefox 中的一个奇怪问题,我也遇到过。我通过将想要在 100% 进度上执行的代码从 onprogress
事件移动到 xhr.readyState
来解决此问题。我从 onprogress
事件中删除了它,因为如果我将它放在两个地方,我的代码就会产生问题。
关于ajax - 使用 AJAX 的 Firefox 中的进度事件未达到 100%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17932058/