jQuery AJAX बड़े टेक्स्ट फ़ील्ड के लिए प्रगति अपलोड करें

Question

क्या jQuery AJAX का उपयोग करके बहुत बड़े टेक्स्टफील्ड वाले फ़ॉर्म के लिए अपलोड-प्रगति प्राप्त करना संभव है? मुझे लगता है कि क्लाइंट जानता है कि कितने बाइट भेजे गए हैं, लेकिन जब मैं Google को केवल सर्वर-साइट कोड का उपयोग करके फ़ाइल अपलोड के लिए समाधान ढूंढता हूं।

$.ajax({ 
     type: "POST", 
     url: "index.php?action=saveNewPost", 
     data: {textbox1: textbox1,textbox2: textbox2}, 
     contentType: "application/x-www-form-urlencoded;charset=UTF-8", 
     success: function(){ 
      // 
     } 
    }); 

मैं वहाँ उम्मीद थी एक पैरामीटर बाइट्स पहले ही भेज दिया की राशि से युक्त के साथ "onProgress" की तरह कुछ होगा ...

मिले एक समाधान:

यह मेरा ajax अनुरोध है

$.ajax({ 
     xhr: function() { 
      var req = $.ajaxSettings.xhr(); 
      if (req) { 
       req.upload.addEventListener('progress', function(event) { 
        if (event.lengthComputable) { 
         $('#ajaxFeedbackDiv').html(event.loaded); // = 'test'; //event.loaded + '/' + event.total; 
        } 
       }, false); 
      } 
      return req; 
     }, 
     type: "POST", 
     url: "index.php?action=saveNewPost", 
     data: {textbox1: textbox1,textbox2: textbox2}, 
     contentType: "application/x-www-form-urlencoded;charset=UTF-8" 
     } 
    }); 

इस, काम करने के लिए लगता है अभी भी हालांकि

2 समस्याओं:

1. मेरी स्थानीय होस्ट पर कनेक्शन, बहुत तेजी से रास्ता है, तो यह "प्रगति" वास्तव में काम करते हुए देखना मुश्किल है। मैंने इस उपकरण को उसी नेटवर्क में दूसरे मैक पर http://mschrag.github.com इंस्टॉल किया और मुझे लगता है कि यह पूरी तरह से काम कर रहा है।
2. मुझे यकीन नहीं है कि यह गैर-एक्सएचआर/एचटीएमएल 5-अनुकूल ब्राउज़र पर फॉल-बैक फ्रेंडली होगा, यानी प्रगति की जानकारी के बिना अपलोड करें?

Answer 1

आप HTML5 सक्षम ब्राउज़र में नए XMLHttpRequest ऑब्जेक्ट के साथ इसे प्राप्त कर सकते हैं। यह progress ईवेंट का समर्थन करता है जिसे आप सदस्यता ले सकते हैं और AJAX ऑपरेशन के बारे में अधिसूचित किया जा सकता है।

यहाँ एक उदाहरण है:

document.getElementById('myForm').onsubmit = function() { 
    var xhr = new XMLHttpRequest(); 

    xhr.upload.addEventListener('progress', function(e) { 
     if (e.lengthComputable) { 
      var percentage = Math.round((e.loaded * 100)/e.total); 
      document.getElementById('progress').innerHTML = percentage + '%'; 
     } 
    }, false); 

    xhr.open(this.method, this.action, true); 
    xhr.onreadystatechange = function() { 
     if (xhr.readyState == 4 && xhr.status == 200) { 
      alert(xhr.responseText); 
     } 
    }; 

    xhr.send(new FormData(this)); 
    return false;  
}; 

और यहाँ एक live demo है।

Answer 2

हो सकता है कि आप इस jQuery प्लगइन का उपयोग कर सकते हैं:

https://www.articlage.com/adrianillo/article/DataUploader

बस प्रक्रिया को अपलोड करने