XMLHttpRequest and formData

Subject:

in order to use the progress method I had to change $.ajax to XMLHttpRequest object:refrences: http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/references:http://stackoverflow.com/questions/3038901/how-to-get-the-response-of-xmlhttprequest

$(':file').change(function(e){

                    var formData = new FormData($(this).closest('form')[0]);

                    var xhr = new XMLHttpRequest();                    xhr.open('post', '../../assets/php/editFile.php?folder='+parentAttr+'&id='+<?php echo $job['id']; ?>, true);                    xhr.onload = function(data){

                        if(this.status == 200){                                                        var err = $(xhr.responseText).filter('.err').html();                            if(typeof err == 'undefined'){                                alert('File Upload Complete!');                                location.reload();                            }else{                                alert(err);                                location.reload();                            }                                                                                }                    };

                    

                    var progressBar = document.querySelector('progress');                    xhr.upload.onprogress = function(e) {                        if (e.lengthComputable) {                              progressBar.value = (e.loaded / e.total) * 100;                          progressBar.textContent = progressBar.value; // Fallback for unsupported browsers.                          //console.log(progressBar.textContent);                          //alert('here');                        }                      };                                        xhr.send(formData);

                });//end of change function

2015-07-06 08:22:07gstlouis

$(':file').change(function(e){

                    var formData = new FormData($(this).closest('form')[0]);

                    var xhr = new XMLHttpRequest();
                    xhr.open('post', '../../assets/php/editFile.php?folder='+parentAttr+'&id='+<?php echo $job['id']; ?>, true);
                    xhr.onload = function(data){

                        if(this.status == 200){
                            
                            var err = $(xhr.responseText).filter('.err').html();
                            if(typeof err == 'undefined'){
                                alert('File Upload Complete!');
                                location.reload();
                            }else{
                                alert(err);
                                location.reload();
                            }
                            
                            
                        }
                    };

                    

                    var progressBar = document.querySelector('progress');
                    xhr.upload.onprogress = function(e) {
                        if (e.lengthComputable) {    
                          progressBar.value = (e.loaded / e.total) * 100;
                          progressBar.textContent = progressBar.value; // Fallback for unsupported browsers.
                          //console.log(progressBar.textContent);
                          //alert('here');
                        }
                      };
                    
                    xhr.send(formData);

                });//end of change function

gstlouis
vote
2015-07-06 08:22:31

another reference: http://www.html5rocks.com/en/tutorials/file/xhr2/

gstlouis
vote
2015-07-06 09:00:54