XMLHttpRequest स्तर 2 - निर्धारित करें कि अपलोड समाप्त होने पर

Question

मैं फ़ाइल अपलोड के लिए AJAX का उपयोग कर रहा हूं। फ़ाइल अपलोड होने के बाद, php को इसकी जांच करनी चाहिए (माइम, आकार, वायरस (क्लैमस्कैन) और अधिक) - इसमें बड़ी फ़ाइलों के लिए कुछ सेकंड लगते हैं। फ़ाइल अपलोड होने पर, एक HTML5 <progress> भर रहा है, जब फ़ाइल तैयार है और PHP जांच शुरू कर देता है, प्रगति अनिश्चितता पर स्विच होनी चाहिए। मैं तरीके यह करने के लिए के बारे में सोचा है (जो दोनों नहीं काम):

, जांच की जा रही upload.onload घटना

xhr.upload.addEventListener("load", function (e) { 
    $("#uploadprogress").attr("value", false); 
    $("#uploadprogress").attr("max", false); 
    $("#progress").text("Checking file..."); 
}); 

यह काम नहीं करता जब क्योंकि onload -event firest अनुरोध तैयार है, जब अपलोड तैयार नहीं है।

अगर अपलोड प्रगति प्रतिशत = 100%

xhr.upload.addEventListener("progress", function (e) { 
    if (e.lengthComputable && e) { 
     p = (e.loaded/e.total); 
     if (p==1) { 
      $("#uploadprogress").attr("value", false); 
      $("#uploadprogress").attr("max", false); 
      $("#progress").text("Checking file..."); 
     } else { 
      var percent = Math.ceil(p * 1000)/10; 
      $("#uploadprogress").val(e.loaded); 
      $("#uploadprogress").attr("max", e.total); 
      $("#progress").text("Uploading... " + percent + "%"); 
     } 
    } 
} 
}); 

यह काम नहीं करता है क्योंकि अपलोड प्रतिशत कभी कभी लगभग बंद हो जाता है जाँच हो रही है। अपलोड होने के बावजूद 97%, PHP फाइलों को संभालने शुरू कर देता है

क्या यह जांचने की कोई और संभावना है?

Answer 1

घटना आप सुनना चाहते हैं पर readystatechange है एक्सएचआर ऑब्जेक्ट (XHR.upload पर नहीं)। readyState4 है जब अपलोड औरभेजना समाप्त हो गया है, सर्वर कनेक्शन बंद कर देता है। loadend/load आग जब अपलोड समाप्त हो गया है, भले ही सर्वर कनेक्शन बंद कर देता है या नहीं। बस में संदर्भ के लिए, यहाँ घटनाओं आप सुन सकते हैं कर रहे हैं और जब वे आग:

var xhr = new XMLHttpRequest(); 

    // ... 
    // do stuff with xhr 
    // ... 

    xhr.upload.addEventListener('loadstart', function(e) { 
     // When the request starts. 
    }); 
    xhr.upload.addEventListener('progress', function(e) { 
     // While sending and loading data. 
    }); 
    xhr.upload.addEventListener('load', function(e) { 
     // When the request has *successfully* completed. 
     // Even if the server hasn't responded that it finished. 
    }); 
    xhr.upload.addEventListener('loadend', function(e) { 
     // When the request has completed (either in success or failure). 
     // Just like 'load', even if the server hasn't 
     // responded that it finished processing the request. 
    }); 
    xhr.upload.addEventListener('error', function(e) { 
     // When the request has failed. 
    }); 
    xhr.upload.addEventListener('abort', function(e) { 
     // When the request has been aborted. 
     // For instance, by invoking the abort() method. 
    }); 
    xhr.upload.addEventListener('timeout', function(e) { 
     // When the author specified timeout has passed 
     // before the request could complete. 
    }); 

    // notice that the event handler is on xhr and not xhr.upload 
    xhr.addEventListener('readystatechange', function(e) { 
     if(this.readyState === 4) { 
     // the transfer has completed and the server closed the connection. 
     } 
    }); 

Answer 2

यह एचटीएमएल 5 स्पेक का अपेक्षाकृत ज्ञात गिरावट है, जब वे समय-समय पर जानकारी और स्थानांतरण स्पीड जैसी जानकारी जोड़ने के लिए इसे बढ़ा सकते थे।

आप var percent के लिए math.round बजाय math.ceil का उपयोग कर ताकि आप fuzziness का एक सा मदद मिलेगी कि बंद किया जा रहा कुछ% अंक के आसपास पाने में पाक कर रहे हैं पर विचार किया है?

आप भी इसे बैकएंड पर पूरा हो गया है, भले ही यदि आप यूआई < 100% पर अटक रही है, loadComplete के लिए एक और श्रोता जोड़ना चाहिए:

//only fires once 
xhr.addEventListener('loadend', uploadComplete, false); 
function uploadComplete(event) { 
    console.log('rejoice...for I have completed'); 
    //do stuff 
} 

Answer 3

readyState, if(readyState==4) {//it has finished, put code here}

Answer 4

https://bugzilla.mozilla.org/show_bug.cgi?id=637002 के आधार पर की जाँच करें।

की एक पूरी काम कर उदाहरण के लिए चलते हैं ...

// YOUR (SIMPLE) JAVASCRIPT FILE 
var form = new FormData(), xhr = new XMLHttpRequest(); 
form.append('inputname', YOURFILE); 

xhr.open('POST', 'http://oneserver/onephpfile', true); 
xhr.setRequestHeader('X-CSRF-Token', 'somestring'); 
xhr.onreadystatechange = function() { 
    if ((xhr.readyState === 4) && (xhr.status === 200)) 
     // do other thing with xhr.responseText.trim() 
}; 

xhr.upload.addEventListener('loadstart', showProgressBarFunction, false); 
xhr.upload.addEventListener('progress', updateProgressBarFunction, false); 
xhr.upload.addEventListener('load',  updateProgressBarFunction, false); 
xhr.send(form); 

// YOUR FIRST (SIMPLE) PHP FILE 
header('Content-Type: text/plain; charset=utf-8'); 
header('Cache-Control: no-cache, must-revalidate'); 

sleep(20); 
echo 'file processing ended'; 

यह पहली PHP फ़ाइल के साथ

, आप देखेंगे: 10% ... 50% ... 75% ... 'अन्य करना फ़ायरफ़ॉक्स (4/10/28/32) और आईई (10/11) के साथ चीज '। हालांकि आप देखेंगे: 10% ... 50% ... 75% ... 100% ... क्रोम/क्रोमियम (33/37) और ओपेरा (24) के साथ।

// YOUR SECOND (SIMPLE) PHP FILE 
header('Content-Encoding: chunked', true); 
header('Content-Type: text/plain; charset=utf-8'); 
header('Cache-Control: no-cache, must-revalidate'); 
ini_set('output_buffering', false); 
ini_set('implicit_flush', true); 
ob_implicit_flush(true); 
for ($i = 0; $i < ob_get_level(); $i++) 
    ob_end_clean(); 
echo ' '; 

sleep(20); 
echo 'file processing ended'; 

इस दूसरे PHP फ़ाइल के साथ

, आप देखेंगे: 10% ... 50% ... 75% ... 100% ... क्रोम/क्रोमियम के साथ 'अन्य काम करते हैं' (33/37/53), ओपेरा (24/42), फ़ायरफ़ॉक्स (4/10/28/32/45), आईई (10/11) और एज (14)!