Postęp przesyłania pliku jQuery AJAX dla dużych pól tekstowych

Question

Czy można uzyskać postęp przesyłania dla formularza z bardzo dużymi polami tekstowymi za pomocą jQuery ajax? Myślę, że klient wie, ile bajtów zostało wysłanych, ale kiedy znajduję Google, znajduję tylko rozwiązania do przesyłania plików za pomocą kodu strony serwera.

To mój ajax-request:

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

Miałem nadzieję, że będzie coś w stylu „onProgress” z parametrem zawierającym ilość bajtów wysłanych już ...

znalazł rozwiązanie

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

to wydaje się działać, altough nadal istnieją

2 problemy:

1. połączenia na moim localhost jest zbyt szybki, więc trudno, aby zobaczyć „postęp” faktycznie działa. Zainstalowałem to narzędzie na komputerze Macintosh w tej samej sieci i widzę, że działa idealnie.
2. Nie jestem pewien, czy będzie to przyjazne dla przeglądarek niezgodnych z XHR/HTML5, tj. Po prostu przesłać bez informacji o postępie?

Answer 1

Możesz to osiągnąć dzięki nowemu obiektowi XMLHttpRequest w przeglądarkach obsługujących HTML5. Obsługuje zdarzenie progress, które można subskrybować i otrzymywać powiadomienia o operacji AJAX.

Oto przykład:

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

i oto live demo.

Answer 2

Może można użyć tej jquery plugin:

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

Wystarczy dodać progressbar przesłać procesowi