Ajaxファイルのアップロード、 'progress'アップロードイベントがEdgeブラウザで起動しない

Question

ajax経由でフォームデータを投稿するファイルアップロードコントロールを開発しています。

私はChrome、Firefox、IE 11,10でこのクロスブラウザーを使用しています。ただし、Microsoft Edgeブラウザーでは、アップロードの 'progress'イベントは発生しません。

誰もがなぜそれを指摘し、エッジに回避策があるか教えていただけますか？

以下のJavaScriptスニペットとHTMLを参照してください。

は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

あなたがhereを確認することができ、これは、エッジ15の既知の問題です。 誰でもエラーwith this fiddleを再現できます。

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

ご覧のとおり、100％に達すると更新されます。