I have a uploading multiple files with html5 and javascript after uploading multiple files it get all data in form now i want to change the following code to get only new image data after upload no all form data. How is it in my code?
HTML:
<a href="javascript:doClick()" class="BrowseFile Button" >File browsing</a>
<input type="file" name="files[]" id="fileElem" multiple="multiple" accept="image/*" style="display:none;" onchange="handleFiles(this.files)">
JS:
function handleFiles(files) {
var formData = new FormData($('.EditUserInfo')[0]);
$.ajax({
url: 'insert_image',
type: 'POST',
dataType: 'json',
maxNumberOfFiles: 1,
autoUpload: false,
xhr: function() {
myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) {
myXhr.upload.addEventListener('progress', progressHandlingFunction, false);
}
return myXhr;
},
success: function(result) {
console.log($.ajaxSettings.xhr().upload);
alert('upload is done');
},
"error": function(x, y, z) {
alert("An error has occured:\n" + JSON.stringify(x) + "\n" + JSON.stringify(y) + "\n" + JSON.stringify(z));
},
data: formData,
cache: false,
contentType: false,
processData: false
});
function progressHandlingFunction(e) { // ***** I mean here. **** //
if (e.lengthComputable) {
alert('img size: '+e.loaded);
//var percentComplete = Math.round(e.loaded * 100 / e.total);
//$('.progress').text(percentComplete.toString() + '%');
}
}
}