अजाक्स फ़ाइल अपलोड, 'प्रगति' अपलोड ईवेंट एज ब्राउज़र में आग नहीं है

Question

मैं एक फ़ाइल अपलोड नियंत्रण विकसित कर रहा हूं जो पोस्ट AJAX के माध्यम से डेटा बनाते हैं।

मेरे पास क्रोम, फ़ायरफ़ॉक्स, आईई 11, 10 में यह कामकाजी क्रॉस ब्राउज़र है। हालांकि माइक्रोसॉफ्ट एज ब्राउज़र में अपलोड 'प्रगति' घटना आग लगती नहीं है।

क्या कोई बता सकता है कि एज में चारों ओर एक काम है या नहीं?

कृपया नीचे जावास्क्रिप्ट स्निपेट और HTML का पालन करें।

जावास्क्रिप्ट:

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

आप देख सकते हैं, यह केवल अद्यतन जब एक सौ प्रतिशत तक पहुंच गया।