Процесс загрузки при загрузке нескольких файлов

	  //attach
function sendFileToServer(formData, status, file) {
var uploadURL = "index.php?p=ticket-attach&ajax=1"; //Upload URL
var extraData = {}; //Extra Data.
var jqXHR = $.ajax({
xhr: function() {
var xhrobj = $.ajaxSettings.xhr();
if (xhrobj.upload) {
xhrobj.upload.addEventListener('progress', function(event) {
var percent = 0;
var position = event.loaded || event.position;
var total = event.total;
if (event.lengthComputable) {
percent = Math.ceil(position / total * 100);
}
//Set progress
status.setProgress(percent);
}, false);
}
return xhrobj;
},
url: uploadURL,
type: "POST",
contentType: false,
processData: false,
cache: false,
data: formData,
dataType: "json",
success: function(data) {
if (data['error'] == "") {
status.setProgress(100);
status.setFileNameSize(data['fname'].split(",")[0], file.size);
status.appendFN(data['fname']);
//var namef= ;
} else {
//alert(data['error']);
status.errorMsg();
}
}
});
status.setAbort(jqXHR);
}

function createStatusbar(obj) {
this.statusbar = $("<div class='statusbar'  id=''></div>");
this.filename = $("<div class='filename'></div>").appendTo(this.statusbar);
this.size = $("<div class='filesize'></div>").appendTo(this.statusbar);
this.abort = $("<div class='abort'>&times;</div>").appendTo(this.statusbar);
this.progressBar = $("<div class='progressBar'><div></div></div>").appendTo(this.statusbar);
obj.append(this.statusbar);
this.setFileNameSize = function(name, size) {
var sizeStr = "";
var sizeKB = size / 1024;
if (parseInt(sizeKB) > 1024) {
var sizeMB = sizeKB / 1024;
sizeStr = sizeMB.toFixed(2) + " MB";
} else {
sizeStr = sizeKB.toFixed(2) + " KB";
}
this.filename.html(name);
this.size.html("(" + sizeStr + ")");
this.statusbar.attr("sizev", size);
$("#attach_size").attr("sizev", parseInt($("#attach_size").attr("sizev")) + size);
this.setTotalSize();
}
this.setTotalSize = function() {
//set total size
var size = parseInt($("#attach_size").attr("sizev"));

var sizeStr = "";
var sizeKB = size / 1024;
if (parseInt(sizeKB) > 1024) {
var sizeMB = sizeKB / 1024;
sizeStr = sizeMB.toFixed(2) + " MB";
} else {
sizeStr = sizeKB.toFixed(2) + " KB";
}
if (sizeStr != "" && size > 0) $("#attach_size").html("(" + sizeStr + ")");
else $("#attach_size").html("");
}
this.setProgress = function(progress) {

var progressBarWidth = progress * this.progressBar.width() / 100;
this.progressBar.find('div').animate({
width: progressBarWidth
}, 10).html(progress + "%");
if (parseInt(progress) >= 100) {
this.progressBar.hide();
if ($.isFunction(tinymce.get)) tinymce.get('mail_body').isNotDirty = 0;
$("#save_status").html("Not saved");

//this.abort.hide();
} else {
if ($.isFunction(tinymce.get)) tinymce.get('mail_body').isNotDirty = 1;
$("#save_status").html("Not saved");
}
}
this.setAbortFD = function() {
var sb = this.statusbar;
var ts = this;
this.abort.click(function() {
$.ajax({
type: "POST",
url: "index.php?p=ticket-dattach&ajax=1",
data: "fname=" + sb.children(".filename").children("input").val(),
//dataType: "json",
success: function(data) {
tinymce.get('mail_body').isNotDirty = 0;
$("#save_status").html("Not saved");
},
error: function() {
alert('File is not deleted');
}
});
//alert(sb.children(".filename").children("input").val());
$("#attach_size").attr("sizev", (parseInt($("#attach_size").attr("sizev")) - parseInt(sb.attr("sizev"))));
sb.remove();
ts.setTotalSize();
});
}
this.setAbort = function(jqxhr) {
var sb = this.statusbar;
var ts = this;
this.abort.click(function() {
jqxhr.abort();
if (sb.children(".progressBar").children("div").html() == "100%") {
$.ajax({
type: "POST",
url: "index.php?p=ticket-dattach&ajax=1",
data: "fname=" + sb.children(".filename").children("input").val(),
//dataType: "json",
success: function(data) {
tinymce.get('mail_body').isNotDirty = 0;
$("#save_status").html("Not saved");
},
error: function() {
alert('File is not deleted');
}
});
$("#attach_size").attr("sizev", (parseInt($("#attach_size").attr("sizev")) - parseInt(sb.attr("sizev"))));
sb.remove();
} else {
sb.remove();
}
ts.setTotalSize();
});
}
this.appendFN = function(fn) {
this.filename.append("<input type=\"hidden\"  name=\"ticket_attach[]\"  value=\"" + fn + "\"   />");
}
this.errorMsg = function() {
var sb = this.statusbar;
sb.children(".progressBar").children("div").html("File Error");
sb.children(".progressBar").show();
sb.children(".filename").children("input").remove()
}
}

function toggle_class(clas) {
$("." + clas).toggle();
}

function insert_attach(input) {
var files = input.files;
$.each(files, function(idx, file) {
var fd = new FormData();
fd.append('ticket_attach', file);
var obj = $(".note-attachbox");
var status = new createStatusbar(obj); //Using this we can set progress.
status.setFileNameSize(file.name, file.size);
sendFileToServer(fd, status, file);
});
$("#afile_browser").val("");
}

.abort {
color: red;
cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="note-attachbox" id="attachbox" style="position: relative; display: inline;"></div>
<input type='file' id='afile_browser' onchange='return insert_attach(this);' style="opacity: 0; position: relative; display: inline; cursor: pointer; width: 100px; padding: 1px 0px; border: medium none;" multiple>
<div style="cursor: pointer; color: rgb(59, 179, 36); display: inline-block; font-weight: bold; font-size: 20px; vertical-align: middle; background: none; width: auto; padding: 5px 0px; margin-left: -105px;">+<i style="font-size: 15px; font-weight: normal;">Attach files<span id="attach_size" sizev="0"></span ></i>
</div>