我有一个AJAX上传工作,所有准备就绪,除了百分比和进度条之外,用户无法看到任何信息。我想要做的是为每个文件创建一个div并显示每个文件的进度。我是否必须使用flash或者我可以从jquery完成所有操作因为我得到了ajax部分,所有剩下的就是为每个文件制作div并为每个文件显示进度条。如果我要上传多个文件,它会显示1个进度条,将所有文件上传到一起,我想分别为每个文件进行操作。所以基本上有一个表单可以选择多个文件并为每个文件创建一个div来显示每个文件的完成百分比。
JavaScript的:
$('#Submit').click(function(event)
{
if ( !("FormData" in window) ) {
$('#Wrapper').append('<div class="DMsg"><label class="DText">You Are Using An Outdated Browser, Please Upgrade To Google Chrome Or Firefox, If You Dont Most Features Will Not Work. Click Anywhere To Dismiss.</label></div>');
$('#Wrapper').find('.DMsg').hide().slideDown('slow');
var Close = setTimeout(function()
{
$('.DMsg').slideUp('slow', function()
{
$('.DMsg').remove();
});
}, 10000);
}
else
{
function Upload()
{
event.preventDefault();
event.stopPropagation();
var FInput = $('#Files').val();
if(FInput != '')
{
var Data = new FormData();
var Files = document.getElementById('Files');
for(var I = 0; I < Files.files.length; ++I)
{
var FilesName = Files.files[I].name;
Data.append('File[]', Files.files[I]);
}
var Request = new XMLHttpRequest();
Request.upload.addEventListener('progress', function(event)
{
if(event.lengthComputable)
{
Percent = event.loaded / event.total;
Progress = document.getElementById('Progress');
Loaded = Math.round(Percent * 100);
$('#Progress').progressbar({
value: Loaded
});
$('#Loaded').text(Loaded + '%');
}
else
{
$('#Progress').text('There Was An Error Getting The Percent');
}
});
Request.upload.addEventListener('load', function(event)
{
});
Request.upload.addEventListener('error', function(event)
{
alert('Upload Failed.');
});
Request.addEventListener('readystatechange', function(event)
{
if(this.readyState == 4)
{
if(this.status == 200)
{
$('#Wrapper').append('<div class="DMsg"><label class="DText">Your Files Have Finished Uploading. Click Anywhere To Dismiss.</label></div>');
$('#Wrapper').find('.DMsg').hide().slideDown('slow');
$('#Loaded').text('100%');
$('#Progress').progressbar({
value: 100
});
var Close = setTimeout(function()
{
$('.DMsg').slideUp('slow', function()
{
$('.DMsg').remove();
});
}, 10000);
}
else
{
$('#Wrapper').append('<div class="DMsg"><label class="DText">There Was An Error In Uploading Your Files. Click Anywhere To Dismiss.</label></div>');
$('#Wrapper').find('.DMsg').hide().slideDown('slow');
var Close = setTimeout(function()
{
$('.DMsg').slideUp('slow', function()
{
$('.DMsg').remove();
});
}, 10000);
}
}
});
Request.open('POST', 'Upload.php');
Request.setRequestHeader('Cache-Control', 'no-cache');
Progress.style.display = 'block';
Request.send(Data);
}
else
{
$('#Wrapper').append('<div class="DMsg"><label class="DText">Please Select A File / Files. Click Anywhere To Dismiss.</label></div>');
$('#Wrapper').find('.DMsg').hide().slideDown('slow');
var Close = setTimeout(function()
{
$('.DMsg').slideUp('slow', function()
{
$('.DMsg').remove();
});
}, 10000);
}
}
var EachFile = 0
$.each($('#Files')[0].files, function()
{
++EachFile;
Upload();
});
}
});
HTML:
<div id="UForm">
<form action="" method="post" enctype="multipart/form-data">
<input type="file" class="Files" id="Files" name="File[]" />
<input type="submit" name="Submit" class="AB" id="Submit" value="Upload!" />
<div id="Progress"></div>
<div class="Caption"><label id="Loaded"></label></div>
</form>
</div>
很抱歉代码很多。
答案 0 :(得分:0)
它显示了一个很大的负载条,因为你正在搜索带有DMsg类的元素和从上到下的jquery搜索,所以它总能找到你设置的第一个加载条。
您需要一种方法为每个新栏设置不同的ID,或者当您执行
时$('#Wrapper').find('.DMsg').hide().slideDown('slow');
找到获得最后结果的方法。