jQuery AJAX caricamento avanzamento per campi di testo di grandi dimensioni

Question

È possibile ottenere il progresso di caricamento di un modulo con campi di testo molto grandi utilizzando jQuery ajax? Penso che il client sappia quanti byte sono stati inviati, ma quando trovo Google trovo solo soluzioni per il caricamento di file usando il codice del sito del server.

Questo è il mio ajax-richiesta:

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

Speravo ci sarebbe qualcosa di simile "onProgress" con un parametro che contiene la quantità di byte già inviati ...

trovato una soluzione

$.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" 
     } 
    }); 

questo sembra funzionare, ospitarci ci sono ancora

2 problemi:

1. il collegamento sul mio localhost è troppo veloce, quindi è difficile vedere il "progresso" in realtà di lavoro. Ho installato questo strumento http://mschrag.github.com su un secondo Mac nella stessa rete e vedo che funziona perfettamente.
2. Non sono sicuro che questo accadrà in caso di browser non compatibili con XHR/HTML5, ovvero caricare semplicemente le informazioni di avanzamento?

Answer 1

È possibile ottenere questo risultato con il nuovo oggetto XMLHttpRequest nei browser compatibili HTML5. Supporta l'evento progress a cui è possibile iscriversi e ricevere la notifica dell'operazione AJAX.

Ecco un esempio:

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;  
}; 

ed ecco una live demo.

Answer 2

forse è possibile utilizzare questo plugin jQuery:

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

Basta aggiungere un ProgressBar per caricare processo