Ajax dosya yükleme, 'progress' yükleme olayı yanıyor tarayıcı

Question

Form verilerini ajax üzerinden gönderen bir dosya yükleme kontrolü geliştiriyorum.

Chrome, Firefox, IE 11, 10'da bu çalışma çapraz tarayıcım var. Ancak Microsoft Edge tarayıcısında, yükleme 'progress' olayı yanıyor gibi görünmüyor.

Kim, Edge'de bir işin olup olmadığını bana söyleyip neden söyleyebilir?

Lütfen JavaScript snippet'ine ve aşağıdaki HTML'ye bakın.

JavaScript:

... 
uploadFile: function() { 

    var self = this; 

    var fileName = $('#file-input').val(); 

    if (fileName) { 

     $('#file-upload-submit').attr('disabled', 'disabled'); 

     // Browsers create a path with 'C:\fakepath in, which is not useful 
     // and needs to be stripped out 

     fileName = fileName.replace('C:\\fakepath\\', ''); 

     var s3Key = self.s3KeyPrefix + self.createUuid() + '/' + fileName; 

     $('#s3-key').val(s3Key); 

     var fileExtension = self.getFileExtension(fileName); 

     var contentType; 

     if (fileExtension) { 

      // Find the content type by extension 

      for (var i = 0; i < self.contentTypeMap.length; i++) { 

       if (fileExtension === self.contentTypeMap[i][0]) { 

        contentType = self.contentTypeMap[i][1]; 
       } 
      } 
     } 

     contentType = contentType || 'text/plain'; 

     $('#content-type').val(contentType); 

     var form = $('#file-upload'); 

     var xhr = new XMLHttpRequest(); 

     var handleUploadCommon = function() { 

      $('#file-upload-submit').removeAttr('disabled', 'disabled'); 

      self.clearForm(); 

      self.clearProgress(); 

      self.clearCancelBtn(); 
     } 

     var handleUploadProgress = function (e) 
     { 
      if (e.lengthComputable) { 

       self.displayProgress(e.loaded, e.total); 
      } 
     } 

     var handleUploadComplete = function() 
     { 
      var url = self.s3BrowserLinkPrefix + '/' + s3Key; 

      // Trigger callback 

      if (self.callbacks.onFileUploaded) { 
       self.callbacks.onFileUploaded(s3Key, url); 
      } 

      self.uploadedFiles.push({ 

       url: url, 
       rendered: false 
      }); 

      self.displayUploadedFiles(); 

      handleUploadCommon(); 
     } 

     var handleUploadError = function() 
     { 
      handleUploadCommon(); 

      console.error('An error occurred during file upload'); 
     } 

     var handleUploadAbort = function() 
     { 
      handleUploadCommon(); 
     } 

     xhr.upload.addEventListener('progress', handleUploadProgress, false); 
     xhr.upload.addEventListener('load', handleUploadComplete, false); 
     xhr.addEventListener('error', handleUploadError, false); 
     xhr.addEventListener('abort', handleUploadAbort, false); 
     xhr.open('POST', form.attr('action'), true); 
     xhr.setRequestHeader('Access-Control-Allow-Origin', '*'); 
     xhr.send(new FormData(form[0])); 

     if ($('#cancel-btn').length > 0) { 

      $('#cancel-btn').css('display', 'inline'); 

      $('#cancel-btn').click(function() { 

       // Cancel ajax upload and reset form 

       xhr.abort(); 

       handleUploadAbort(); 
      }); 
     } 
    } 
}, 
displayProgress: function(loaded, total) 
{ 
    // If elements exist, display text percentage and/or progress bar 

    var pct = ((loaded/total) * 100) | 0; // | 0 coverts to int 

    if ($('#progress-percent').length > 0) 
    { 
     $('#progress-percent').css('display', 'inline-block'); 

     $('#progress-percent-text').text(pct + '%'); 
    } 

    if ($('#progress-bar').length > 0) { 

     $('#progress-bar-inner').css('width', pct + '%'); 
    } 
} 
... 

HTML:

<form id="file-upload" action="https://@(ViewBag.S3Bucket).s3.amazonaws.com/" method="post" enctype="multipart/form-data"> 

     <input type="hidden" id="s3-key" name="key" /><br /> 
     <input type="hidden" id="content-type" name="Content-Type" /><br /> 
     <input type="hidden" name="acl" value="@ViewBag.S3Acl" /> 
     <input type="hidden" name="AWSAccessKeyId" value="@ViewBag.AwsAccessKeyId" /> 
     <input type="hidden" name="Policy" value="@ViewBag.Policy" /> 
     <input type="hidden" name="Signature" value="@ViewBag.Signature" /> 

     <input id="file-input" type="file" name="file" /> <br /> 

     <div class="file-upload-submit-container"> 
      <input id="file-upload-submit" class="btn btn-primary" type="button" name="submit" value="Upload"/> 
      <span id="progress-percent"> 
       <svg class="loader" width='20px' height='20px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-ring-alt"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><circle cx="50" cy="50" r="40" stroke="#bababa" fill="none" stroke-width="10" stroke-linecap="round"></circle><circle cx="50" cy="50" r="40" stroke="#707070" fill="none" stroke-width="6" stroke-linecap="round"><animate attributeName="stroke-dashoffset" dur="2s" repeatCount="indefinite" from="0" to="502"></animate><animate attributeName="stroke-dasharray" dur="2s" repeatCount="indefinite" values="150.6 100.4;1 250;150.6 100.4"></animate></circle></svg> 
       <span id="progress-percent-text">0%</span> 
      </span> 
      <span id="cancel"> 
       <a id="cancel-btn">Cancel</a> 
      </span> 
     </div> 
    </form> 

Answer 1

Bu here kontrol edebilirsiniz olarak, Kenar 15'in bilinen bir sorundur. Herkes with this fiddle hatasını yeniden oluşturabilir.

xhr.upload.onprogress = updateProgress; 
// I only added this code because stack overflow forced me! 

Gördüğünüz gibi, yalnızca yüzde yüze ulaşıldığında güncellenir.