एक्सएचआर लेवल 2 फ़ाइल अपलोड के लिए

Question

मैं jQuery अजाक्स से कच्चे एक्सएचआर ऑब्जेक्ट को कैसे एक्सेस कर सकता हूं? बात यह है कि, नया XMLHttpRequest स्तर 2 विनिर्देश XHR की एक उप-संपत्ति प्रदान करता है जिसे अपलोड कहा जाता है लेकिन स्पष्ट रूप से jQuery में अभी तक यह नहीं है। मैं jQuery अजाक्स का उपयोग करना जारी रखना चाहता हूं लेकिन मुझे नहीं पता कि वर्तमान jQuery लाइब्रेरी के साथ नई कार्यक्षमता को कैसे विलय करना है।

Answer 1

JQuery के नए संस्करणों में कच्चे xhr ऑब्जेक्ट jqXhr ऑब्जेक्ट में लपेटा गया है जिसमें xhr की नई अपलोड संपत्ति का कोई संदर्भ नहीं है और दस्तावेज़ीकरण में यह स्पष्ट नहीं है कि इसे कैसे किया जाए। तरह से मैं एक सफल jQuery-ajax-एचटीएमएल 5 फ़ाइल अपलोडर पाने के लिए कुछ अतिरिक्त सेटिंग्स के साथ, यह करने के लिए मिल गया था:

var formData = new FormData($('#myForm')[0]); 
$.ajax({ 
    url: 'upload.php', 
    type: 'POST', 
    xhr: function() { 
     myXhr = $.ajaxSettings.xhr(); 
     if(myXhr.upload){ 
      myXhr.upload.addEventListener('progress',progressHandlerFunction, false); 
     } 
     return myXhr; 
    }, 
    data: formData, 
    cache: false, 
    contentType: false, 
    processData: false 
}); 

$ .ajaxSettings.xhr() मैं origianal XHR मिलता है, तो मैं परीक्षण के साथ

यदि प्रगति (HTML5?) बार को नियंत्रित करने के लिए प्रगति घटना को बांधने के लिए संपत्ति अपलोड की गई है। अन्य सेटिंग्स मुझे फॉर्मेटा ऑब्जेक्ट के रूप में फॉर्म jquery AJAX के माध्यम से भेजने की अनुमति देती हैं।

Answer 2

डैन्यॉ के उत्तर में थोड़ा बदलाव। मैंने एक jQuery प्लगइन बनाया है जिसे आप इसे आसान बनाने के लिए फ़ाइल इनपुट पर कॉल कर सकते हैं। आप इसे अपनी अपलोड स्क्रिप्ट पास करते हैं, फिर आपकी सफलता फ़ंक्शन और फिर आपकी प्रगति फ़ंक्शन।

$.fn.upload = function(remote,successFn,progressFn) { 
    return this.each(function() { 

     var formData = new FormData(); 
     formData.append($(this).attr("name"), $(this)[0].files[0]); 

     $.ajax({ 
      url: remote, 
      type: 'POST', 
      xhr: function() { 
       myXhr = $.ajaxSettings.xhr(); 
       if(myXhr.upload && progressFn){ 
        myXhr.upload.addEventListener('progress',progressFn, false); 
       } 
       return myXhr; 
      }, 
      data: formData, 
      cache: false, 
      contentType: false, 
      processData: false, 
      complete : function(res) { 
       if(successFn) successFn(res); 
      } 
     }); 
    }); 
} 

प्रयोग

$(".myFile").upload("upload.php",function(res) { 
    console.log("done",res); 
},function(progress) { 
    console.log("progress", progress); 
});