jQuery 진행률 표시 줄이 firefox에서만 작동하지 않습니다.

Question

하나의 파일을 업로드 할 수있는 페이지를 만들었으며 진행률을 추적하기 위해 진행률 막대를 포함하고 싶습니다. Chrome에서 완벽하게 작동합니다 (IE와 Edge에서 완벽하지는 않지만 여전히 조금 줄 수 있습니다). 그러나 진행률 표시 줄과 관련 document.getElementById()이 제대로 작동하지 않습니다. 파이어 폭스는 업로드

실패한 대신 같은 업로드 바이트의 숫자로 내 진행률 막대 애니메이션과 관련 업로드 데이터를 표시

표시 증가했다. 이상한 것은 내 파일이 결국 업로드되고 성공 페이지로 리디렉션된다는 것입니다. 파이썬 디버깅 도구를 사용하여 코드를 한 줄씩 건너 뛸 때 진행 막대 및 업로드 데이터가 올바르게 표시 될 때까지도 더 이상하지 않습니다.

추신. 이것들은 localhost에서만 테스트되었습니다.

uploadfile.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"; 
} 

Answer 1

사용 jQuery를이 depricrated 방법을 방지 할 수 있습니다.

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 + "%"); 
    } 
} 

를 처리

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); 
    } 
});