एक्सएचआर अपलोड प्रगति

Question

से 100% है, मैं कुछ फ़ाइलों को एक php स्क्रिप्ट में अपलोड करने के लिए नई XMLHTTPRequestUpload सुविधा का प्रयास कर रहा हूं, यह ज्यादातर ठीक काम करता है, अपलोड शुरू होता है, मुझे फिनिश प्रतिक्रिया आदि मिलती है - लेकिन प्रगति नहीं होती है काम नहीं लग रहा है।

देख रहे हैं कि event.loaded मान - फ़ायरफ़ॉक्स में मुझे 0 और फ़ाइल आकार के बीच एक यादृच्छिक मान मिल रहा है; क्रोम में (जहां मैं अधिकतर काम कर रहा हूं) मुझे कुल फ़ाइल आकार मिलता है, भले ही तैयारस्टेट '4' तक नहीं पहुंच पाता है और डेवलपर टूल विंडो अभी भी फ़ाइल को लोड होने के लिए दिखाती है?

कोई विचार?

यहाँ मेरा कोड:

var xhr = new XMLHttpRequest() 

xhr.upload.addEventListener('progress', function(event) { 
    if (event.lengthComputable) { 
     $('ajaxFeedbackDiv').innerHTML = event.loaded + '/' + event.total; 
    } 
}, false); 

xhr.onreadystatechange = function(event) { 
    if (event.target.readyState == 4) { 
     updateFileList(); 
    } 
}; 

xhr.open("POST", "_code/upload.php"); 
xhr.setRequestHeader("Cache-Control", "no-cache"); 
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); 
xhr.setRequestHeader("X-File-Size", file.size); 
xhr.setRequestHeader("X-File-Type", file.type); 
xhr.setRequestHeader("Content-Type", "multipart/form-data"); 
xhr(file); 

बहुत धन्यवाद

बेन

Answer 1

मैं भी हाल ही में कुछ एक्सएचआर onprogress घटनाओं के लिए एक घटना श्रोता की स्थापना कठिनाई थी। मैं एक गुमनाम समारोह है, जो खूबसूरती से काम करता है के रूप में यह लागू करने समाप्त हो गया:

xhr.upload.onprogress = function(evt) 
{ 
    if (evt.lengthComputable) 
    { 
     var percentComplete = parseInt((evt.loaded/evt.total) * 100); 
     console.log("Upload: " + percentComplete + "% complete") 
    } 
}; 

मैं एक बहुत हालांकि रास्ते में अन्य gotchas, की भर में ठोकर खाई है, तो यह काफी संभावना है उन में से एक मेरी घटना श्रोता अप ट्रिपिंग था । आपके पास जो कुछ है और मेरा सेटअप है, उसके बीच एकमात्र अन्य अंतर यह है कि मैं xhr.sendAsBinary() का उपयोग कर रहा हूं।

Answer 2

मैं खुद को एक समान समस्या में चला गया, जहां पर ईवेंट के लिए मेरा ईवेंट हैंडलर फ़ंक्शन केवल एक बार निष्पादित किया गया था - जब अपलोड पूर्ण हो गया था।

समस्या का कारण सरल हो गया - Google क्रोम (संभवतः अन्य ब्राउज़रों में भी, मैंने परीक्षण नहीं किया), progress ईवेंट उत्तराधिकार में केवल तभी आग लग जाएगा जब अपलोड दूसरे या दो के लिए चल रहा था। दूसरे शब्दों में, यदि आपका अपलोड जल्दी खत्म हो जाता है, तो आपको शायद एक 100% progress ईवेंट मिल जाएगा।

$.ajax({ 
    xhr: function() 
    { 
    var xhr = new window.XMLHttpRequest(); 
    //Upload progress 
    xhr.upload.addEventListener("progress", function(evt){ 
     if (evt.lengthComputable) { 
     var percentComplete = evt.loaded/evt.total; 
     console.log("Upload ", Math.round(percentComplete*100) + "% complete."); 
     } 
    }, false); 
    return xhr; 
    }, 
    type: 'POST', 
    url: "/echo/json/", 
    data: {json: JSON.stringify(new Array(20000))} 
}); 

कंसोल आउटपुट:

यहाँ कोड का एक उदाहरण जिसका progress घटना केवल पूर्ण 100% (https://jsfiddle.net/qahs40r6/) एक ही बार में आग है

Upload 100% complete. 

लेकिन तुम आकार के लिए एक अतिरिक्त शून्य जोड़ने सरणी (10 - https://jsfiddle.net/qahs40r6/1/ के कारक द्वारा पेलोड आकार में वृद्धि):

$.ajax({ 
    xhr: function() 
    { 
    var xhr = new window.XMLHttpRequest(); 
    //Upload progress 
    xhr.upload.addEventListener("progress", function(evt){ 
     if (evt.lengthComputable) { 
     var percentComplete = evt.loaded/evt.total; 
     console.log("Upload ", Math.round(percentComplete*100) + "% complete."); 
     } 
    }, false); 
    return xhr; 
    }, 
    type: 'POST', 
    url: "/echo/json/", 
    data: {json: JSON.stringify(new Array(200000))} 
}); 

तो फिर तुम progress घटनाओं की सामान्य प्रगति मिलती है:

Upload 8% complete. 
Upload 9% complete. 
Upload 19% complete. 
Upload 39% complete. 
Upload 50% complete. 
Upload 81% complete. 
Upload 85% complete. 
Upload 89% complete. 
Upload 100% complete. 

यह व्यवहार पर कितनी तेजी से अपने इंटरनेट कनेक्शन है, इसलिए अपने लाभ भिन्न होगी निर्भर करता है। उदाहरण के लिए, यदि आप पहला उदाहरण लेते हैं और सिम्युलेट "धीमी 3 जी" से अपना कनेक्शन धीमा करने के लिए क्रोम डेवलपर टूल्स का उपयोग करते हैं, तो आप progress ईवेंट की श्रृंखला देखेंगे।

इसी तरह, यदि आप स्थानीय वेब सर्वर पर स्थानीय रूप से विकास और डेटा अपलोड कर रहे हैं, तो संभवतः आप progress ईवेंट कभी नहीं देख पाएंगे क्योंकि अपलोड तुरंत समाप्त हो जाएगा। यह संभावना है कि @brettjonesdev स्थानीयहोस्ट बनाम रिमोट प्रोड परिनियोजन में देख रहा था।