XMLHttpRequest ProgressEvent.lengthComputable neden yanlış olabilir?

Question

İlerleme olayları için XMLHttpRequest düzey 2 desteğini kullanarak bir yükleme ilerleme çubuğu HTML5 yolunu uygulamaya çalışıyorum. gördüğün her örnekte

, yöntem şöyle ilerleme olayı bir olay dinleyicisi eklemektir:

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

Bu gibi örnekler hep event.lengthComputable gerçek olacağını varsaymak gibi görünüyor. Sonuçta, tarayıcı gönderdiği isteğin uzunluğunu biliyor mu?

Ne yaptığım önemli değil, event.lengthComputable yanlıştır. Bunu hem OSX'de hem de Safari 5.1.7 ve Firefox 12'de test ettim.

Sitem Django kullanılarak oluşturuldu ve ben de geliştirme ve geliştirme kurulumlarında aynı sorunu yaşıyorum.

Ben formu yükleme oluşturmak için kullanıyorum tam kodu (jQuery kullanarak) aşağıda gösterilmiştir:

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

Bu konuda saatlerce olsam deliye oldum. Herhangi bir yardım takdir!

Answer 1

Hey @ComFreek dan the answer bulundu:

ben aynı hatayı yaptı.

Yazdığım çizgi vardı:

xhr.onprogress = uploadProgress; 

doğru bir

xhr.upload.onprogress = uploadProgress; 

Answer 2

bu aşamasına bakacak şekilde olmalıdır: https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

xhr.upload.addEventListener ('ilerleme' , işlev (e) {} de çalışır.

Answer 3

Ayrıca AJAX (xmlhttprequest) kullanarak birden çok büyük dosya gönderme konusunda da sorun yaşadım.

Bir çözüm bulundu ve burada kullandığım tüm komut dosyası. Tek ihtiyacınız HTML sayfanıza sonraki çizgiyi yerleştirmektir:

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

ve sonraki komut dosyasını kullanmak:

<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> 

Sonucun da konsolda