当我上传多个文件时，我有一个进度条的错误，我找不到问题：（
我上传了多个文件，但文件是：
1.JPG
2.JPG
3.JPG
4.JPG
拖动文件时的示例错误
1.jpg / complete
1.jpg / complete
1.jpg / complete
1.jpg / complete
我的进度条有问题，我找不到问题所在..
我的剧本：
(function ($) {
var body = document.body;
var h = $(document).height();
var u = {
message: 'Drag and drop file here..',
post_url: 'upload.php'
}
$.fn.dragme = function (uu) {
var t = this;
if (uu) $.extend(u, uu);
t.each(function () {
$(body).append("<div class='droparea' style='height: 100%;display:none;'><span class='message'>" + u.message + "</span></div>");
$('.message').css({
top: '50%',
color: '#F8F8F8',
margin: '45%',
position: 'relative'
});
$(t).on({
dragenter: function (d) {
d.preventDefault();
d.stopPropagation();
if ($('.droparea').length != 1) {
$('.droparea').css('display', 'block');
$('.message').css({
top: '50%',
color: '#F8F8F8',
margin: '45%',
position: 'relative'
});
}
console.log('dragEnter');
},
//---------------------------dragover basic ----------------------------------------//
dragover: function (d) {
d.preventDefault();
d.stopPropagation();
$('.droparea').css('display', 'block');
//console.log('dragover');
},
//---------------------------dragleave basic ----------------------------------------//
dragleave: function (d) {
d.preventDefault();
d.stopPropagation();
$('.droparea').on('dragleave', function (d) {
$('.droparea').remove();
});
}
});
//---------------------------drop add template ----------------------------------------//
this.addEventListener('drop', function (e) {
e.preventDefault();
e.stopPropagation();
$('.droparea').remove();
var files = e.dataTransfer.files;
var template = '<li class="file-preview" id="' + files.name + '">' +
'<div class="progress">' +
'<div class="progressbaru">cool</div>' +
'</div>' +
'</li>';
upload(files, $(this), 0); //upload 1 files
$('#container').append(template);
}, false);
});
//-------------------------------------------------------------------------------//
// function upload
//-------------------------------------------------------------------------------//
function upload(files, area, index) {
var file = files[index];
var xhr = new XMLHttpRequest();
var template = '<li class="file-preview" id="' + files.name + '">' +
'<div class="progress">' +
'<div class="progressbaru"></div>' +
'</div>' +
'</li>';
var formData = new FormData();
formData.append("file", files);
//-------------------------- load -----------------------------------------------//
xhr.addEventListener('load', function (e) {
if (index < files.length - 1) {
alert('here');
upload(files,area, index+1); // upload+1...
$('container').append(template);
console.log(e);
}
}, false);
//---------------------------progressbar----------------------------------------//
xhr.upload.addEventListener('progress',function(e){
if (e.lengthComputable) {
var pourcent = Math.round(e.loaded / e.total * 100);
$('.progressbaru').css('width', pourcent + "%");
console.log(e);
}
else {
alert("Failed to compute file upload length");
}
},false);
//---------------------------! end progressbar----------------------------------------//
xhr.open('post', u.post_url, true); //in real is post
//xhr.setRequestHeader("Content-Type", "multipart/form-data");
xhr.send(formData);
xhr.onreadystatechange = function (e) {
if (xhr.readyState == 4) {
console.log(['xhr upload complete', e]);
}
}
//console.log(formData);
}
}
})(jQuery);
$(document).ready(function () {
$('body').dragme({
});
});
简单的HTML代码：
<body>
<div id="list">
<ul id="container"></ul>
</div>
</body>
任何建议，都会非常感激。谢谢！