jQuery 进度条仅适用于 firefox答案

【问题标题】：jQuery progress bar not working for firefox onlyjQuery 进度条仅适用于 firefox
【发布时间】：2016-11-13 00:00:39
【问题描述】：

我创建了一个用于上传单个文件的页面，我想包含一个进度条来跟踪进度。它在 chrome 上运行良好（在 IE 和 edge 上不是那么完美，但我仍然可以给予和接受）。但是，进度条和相关的document.getElementById() 无法正常工作。 Firefox 跳转显示

上传失败

而不是显示我的进度条动画和相关的上传数据，例如上传的字节数。奇怪的是我的文件最终确实被上传了，我被重定向到了成功页面。更奇怪的是，当我尝试使用firefox调试工具逐行跳过我的代码时，进度条和上传数据都正确显示。

附言。这些仅在 localhost 上进行了测试。

上传文件.php
HTML部分

<form action="getfile.php" id="upload_form" method="post" enctype="multipart/form-data"><br>
    Type (or select) Filename: <input type="file" id="file1" name="uploadfile"><br>
    <input type="submit" value="Upload File" onclick="uploadFile()">
    <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
    <h3 id="status"></h3>
    <p id="loaded_n_total"></p>
</form>

脚本部分

function uploadFile() {
    var file = document.getElementById("file1").files[0];
    // alert(file.name+" | "+file.size+" | "+file.type);
    var formdata = new FormData();
    formdata.append("file1", file);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", "getfile.php");
    ajax.send(formdata);
}
function progressHandler(event) {
    document.getElementById("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;
    var percent = (event.loaded / event.total) * 100;
    document.getElementById("progressBar").value = Math.round(percent);
    document.getElementById("status").innerHTML = Math.round(percent) + "% uploaded... please wait";
}
function completeHandler(event) {
    document.getElementById("status").innerHTML = event.target.responseText;
    document.getElementById("progressBar").value = 0;
}
function errorHandler() {
    document.getElementById("status").innerHTML = "Upload Failed";
}
function abortHandler() {
    document.getElementById("status").innerHTML = "Upload Aborted";
}

【问题讨论】：

标签： javascript php jquery html firefox

【解决方案1】：

使用 jQuery 来避免被贬低的方法。

 var myXhr = jQuery.ajaxSettings.xhr();
 if (myXhr.upload) {
     myXhr.upload.addEventListener('progress', custom_progress, false);
 }

然后处理进度

function custom_progress(e) {
    if (e.lengthComputable) {
        var x = (e.loaded / e.total) * 100;
        jQuery("#progress").html(x + "%");
    }
}

完整的ajax方法

jQuery.ajax({
    url: "/uploadfile.php",
    type: "POST",
    cache: false,
    contentType: false,
    processData: false,
    data: form_data,
    xhr: function() {
        var myXhr = jQuery.ajaxSettings.xhr();
        if (myXhr.upload) {
            myXhr.upload.addEventListener('progress', custom_progress, false);
        }
        return myXhr;
    },
    success: function(response) {
        console.log(response);
    }
});

【讨论】：