XMLHttpRequest रिपोर्ट नहीं कर रही प्रगति की घटनाओं

Question

सभी हाय मैं इस कोड है:

function test() 
{ 
    req = new XMLHttpRequest(); 
    req.upload.addEventListener("progress", updateProgress, false); 
    req.addEventListener("readystatechange", updateProgress, false); 
    req.addEventListener("error", uploadFailed, false); 
    req.addEventListener("abort", uploadCanceled, false); 

    var data = generateRandomData(currentPayloadId); 
    totalSize = data.length; 

    req.open("POST", "www.mydomain.com/upload.aspx"); 
    start = (new Date()).getTime(); 
    req.send(data); 
} 

function updateProgress(evt) 
{ 
    if (evt.lengthComputable) { 
     total = totalSize = evt.total; 
     loaded = evt.loaded; 
    } 
    else { 
     total = loaded = totalSize; 
    } 
} 

इसके अलावा, अपने सर्वर 200 के साथ upload.aspx और के लिए प्रारंभिक विकल्प अनुरोध का जवाब पहुंच-नियंत्रण-अनुमति दें -ऑर्गिन: * और फिर दूसरा अनुरोध POST होता है

सबकुछ जगह पर लगता है और यह फ़ायरफ़ॉक्स पर बहुत अच्छा काम कर रहा है लेकिन जी क्रोम पर अपडेट प्रोग्रेस हैंडलर को कॉल नहीं किया जा रहा है, लेकिन केवल एक बार और फिर लंबाई कॉम्प्यूटेबल गलत है।

मैं पहुंच-नियंत्रण-अनुमति दें-उत्पत्ति की जरूरत: * क्योंकि यह एक क्रॉस-डोमेन कॉल है, स्क्रिप्ट माता-पिता के लिए एक अलग सर्वर पर एक संसाधन तो upload.aspx डोमेन

किसी को भी मुझे कुछ दे सकते हैं सुराग, संकेत, कृपया मदद करें? क्या यह जी क्रोम के साथ एक ज्ञात मुद्दा है?

धन्यवाद!

{ 
    .. 
    "permissions": [ 
    "http://www.example.com/", 
    "https://www.example.com/", 
    ], 
    .. 
} 

तो मुझे लगता है कि अपने उदाहरण से काम करना चाहिए

manifest.json: अंडाणु

Answer 1

सबसे पहले, यह सुनिश्चित करें कि "www.example.com" तो जैसे manifest.json में जोड़ा जाता है, बनाते हैं।

For more information about using xhr in google chrome extensions the docs are here।

भी the CSP docs यदि मैंने उपर्युक्त प्रदान किया है तो यह देखने के लायक हैं।

Answer 2

यह XMLHttpRequest.upload प्रॉपर्टी के साथ एक संगतता समस्या हो सकता है। यह एक XMLHttpRequestUpload ऑब्जेक्ट देता है, लेकिन यदि आप एमडीएन में उस ऑब्जेक्ट स्पेक को खोजने का प्रयास करते हैं तो यह अस्तित्व में नहीं है तो हम कैसे जानते हैं कि कौन से ब्राउज़र पूरी तरह से इसका समर्थन करते हैं।

XMLHttpRequest।अपलोड संगतता

आप XHR पर प्रत्यक्ष रूप से प्रगति के लिए सुन प्रयास किया है:

req.addEventListener("progress", updateProgress, false); 

Answer 3

मैं उस तरह प्रगति के लिए jQuery का उपयोग करें:

$.ajax({ 
     url : furl, 
     type : method, 
     data : data, 
     //... 
     }, 
     xhr : function() { 
      //upload Progress 
      var xhr = $.ajaxSettings.xhr(); 
      if (xhr.upload) { 
        xhr.upload.addEventListener('progress', function (event) { 
         var percent = 0; 
         var position = event.loaded || event.position; 
         var total = event.total; 
         if (event.lengthComputable) { 
          percent = Math.ceil(position/total * 100); 
         } 
         //update progressbar 
         $(".progress-bar").css("width", + percent + "%"); 
         $(" .status").text(position + "/" + total + " (" + percent + "%)"); 
        }, true); 
      } 
      return xhr; 
     }, 

Answer 4

मुझे लगता है कि मैं के लिए एक समाधान है आपके समस्या
मुझे नहीं पता कि इस फ़ंक्शन के पीछे क्या है "generRandomData()"

var data = generateRandomData(currentPayloadId) 

जब मैं इस में बदल यह काम कर रहा है:

var data = new FormData(); 
data.append("fileToUpload", document.getElementById('fileToUpload').files[0]); 

छोटे स्पष्टीकरण: आप मैन्युअल रूप से डेटा एक फ़ाइल इनपुट फार्म है, जहां fileToUploadIF में <input type="file" name="fileToUpload" id="fileToUpload" />
अपने updateProgress समारोह में और है के रूप में संलग्न करने के लिए की जरूरत है भाग आप प्रगति को ट्रैक करने console.log(evt.total +" - "+ evt.loaded)

यह गूगल क्रोम में काम कर रहा है कुछ इस तरह जोड़ सकते हैं ब्राउज़र। मैंने नए ब्राउज़र संस्करण 57
में परीक्षण किया है मैंने अपने लिए 4 साल पहले एक अपलोड प्रगति फॉर्म बनाया है, जिसका अर्थ है कि यह कोड पुराने ब्राउज़र संस्करण में भी काम कर रहा है।

एक पूरे कोड स्निपेट इस

function test() 
{ 
    req = new XMLHttpRequest(); 
    req.upload.addEventListener("progress", updateProgress, false); 
    req.addEventListener("readystatechange", updateProgress, false); 
    req.addEventListener("error", uploadFailed, false); 
    req.addEventListener("abort", uploadCanceled, false); 

    //var data = generateRandomData(currentPayloadId); 
    var data = new FormData(); 
    data.append("fileToUpload", document.getElementById('fileToUpload').files[0]); 
    totalSize = data.length; 

    req.open("POST", "www.mydomain.com/upload.aspx"); 
    start = (new Date()).getTime(); 
    req.send(data); 
} 

function updateProgress(evt) 
{ 
    if (evt.lengthComputable) { 
     total = totalSize = evt.total; 
     loaded = evt.loaded; 
     console.log(evt.total +" - "+ evt.loaded) 
    } 
    else { 
     total = loaded = totalSize; 
    } 
} 

Answer 5

मैं इस समस्या थी जब पेज अपने लोड कर रहे हैं एक

Content-Length: 12345 

शीर्षक में

, शामिल नहीं है की तरह लग रही हो जाएगा जहां 12345 है बाइट्स में प्रतिक्रिया की लंबाई। लंबाई पैरामीटर के बिना, प्रगति फ़ंक्शन पर काम करने के लिए कुछ भी नहीं है।