क्यों XMLHttpRequest ProgressEvent.lengthComputable गलत हो सकता है?

Question

प्रगति घटनाओं के लिए XMLHttpRequest स्तर 2 समर्थन का उपयोग कर, मैं HTML5 प्रगति पट्टी को अपलोड करने की कोशिश कर रहा हूं।

हर उदाहरण आप देख में, विधि इतनी तरह प्रगति घटना के लिए एक घटना श्रोता जोड़ने के लिए है:

req.addEventListener("progress", function(event) { 
    if (event.lengthComputable) { 
     var percentComplete = Math.round(event.loaded * 100/event.total); 
     console.log(percentComplete); 
    } 
}, false); 

इस तरह के उदाहरण हमेशा माना कि event.lengthComputable सच हो जाएगा लग रहे हैं। आखिरकार, ब्राउजर उस अनुरोध की लंबाई जानता है जो वह भेज रहा है, निश्चित रूप से?

कोई फर्क नहीं पड़ता कि मैं क्या करता हूं, event.lengthComputable गलत है। मैंने ओएसएक्स पर सफारी 5.1.7 और फ़ायरफ़ॉक्स 12 में इसका परीक्षण किया है।

मेरी साइट Django का उपयोग करके बनाई गई है, और मुझे अपने देव और उत्पादन सेटअप पर एक ही समस्या मिलती है।

पूर्ण कोड मैं प्रपत्र अपलोड उत्पन्न करने के लिए उपयोग कर रहा हूँ नीचे दिखाया गया है (jQuery का उपयोग):

form.submit(function() { 
    // Compile the data. 
    var data = form.serializeArray(); 
    data.splice(0, 0, { 
     name: "file", 
     value: form.find("#id_file").get(0).files[0] 
    }); 
    // Create the form data. 
    var fd = new FormData(); 
    $.each(data, function(_, item) { 
     fd.append(item.name, item.value); 
    }); 
    // Submit the data. 
    var req = new XMLHttpRequest(); 
    req.addEventListener("progress", function(event) { 
     if (event.lengthComputable) { 
      var percentComplete = Math.round(event.loaded * 100/event.total); 
      console.log(percentComplete); 
     } 
    }, false); 
    req.addEventListener("load", function(event) { 
     if (req.status == 200) { 
      var data = $.parseJSON(event.target.responseText); 
      if (data.success) { 
       console.log("It worked!") 
      } else { 
       console.log("It failed!") 
      } 
     } else { 
      console.log("It went really wrong!") 
     } 
    }, false); 
    req.addEventListener("error", function() { 
     console.log("It went really really wrong!") 
    }, false); 
    req.open("POST", "/my-bar/media/add/"); 
    req.setRequestHeader("X-Requested-With", "XMLHttpRequest"); 
    req.send(fd); 
    // Don't really submit! 
    return false; 
}); 

मैं इस पर घंटे के लिए मेरे बाल बाहर फाड़ दिया गया है। किसी भी मदद की सराहना की!

Answer 1

अरे मैं @ComFreek से the answer पाया:

मैं यही गलती की थी।

लाइन मैंने लिखा था:

xhr.onprogress = uploadProgress; 

सही एक होना चाहिए

xhr.upload.onprogress = uploadProgress; 

Answer 2

इस में एक बार देख ले: https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

xhr.upload.addEventListener ('प्रगति' , फ़ंक्शन (ई) {}) भी काम करेगा।

Answer 3

मुझे AJAX (xmlhttprequest) का उपयोग करके कई बड़ी फ़ाइलों को भेजने में भी समस्या थी।

एक समाधान मिला और यहां पूरी स्क्रिप्ट है जिसका मैं उपयोग करता हूं। आपको बस अपने HTML पृष्ठ में अगली पंक्ति जगह है:

<input type="file" multiple name="file" id="upload_file" onchange="handleFiles(this)"> 

और अगले स्क्रिप्ट का उपयोग:

<script type="text/javacript"> 
    var filesArray; 
    function sendFile(file) 
    { 
     var uri = "<URL TO PHP FILE>"; 
     var xhr = new XMLHttpRequest(); 
     var fd = new FormData(); 

     var self = this; 

     xhr.upload.onprogress = updateProgress; 
     xhr.addEventListener("load", transferComplete, false); 
     xhr.addEventListener("error", transferFailed, false); 
     xhr.addEventListener("abort", transferCanceled, false); 
     xhr.open("POST", uri, true); 
     xhr.onreadystatechange = function() { 
      if (xhr.readyState == 4 && xhr.status == 200) { 
       alert(xhr.responseText); // handle response. 
      } 
     }; 
     fd.append('myFile', file); 
     // Initiate a multipart/form-data upload 
     xhr.send(fd); 
    } 
    function updateProgress (oEvent) 
    { 
     if (oEvent.lengthComputable) 
     { 
      var percentComplete = oEvent.loaded/oEvent.total; 
      console.log(Math.round(percentComplete*100) + "%"); 
     } else { 
      // Unable to compute progress information since the total size is unknown 
      console.log("Total size is unknown..."); 
     } 
    } 

    function transferComplete(evt) 
    { 
     alert("The transfer is complete."); 
    } 

    function transferFailed(evt) 
    { 
     alert("An error occurred while transferring the file."); 
    } 

    function transferCanceled(evt) 
    { 
     alert("The transfer has been canceled by the user."); 
    } 
    function handleFiles(element) 
    { 
     filesArray = element.files; 
     if (filesArray.length > 0) 
     { 
      for (var i=0; i<filesArray.length; i++) 
      { 
       sendFile(filesArray[i]); 
      } 
      filesArray = ''; 
     } 
    } 
    </script> 

आपका परिणाम भी सांत्वना