1
我有以下代码:如何减慢进度条?
<td id="drop-files" ondragover="return false;" colspan="2">
<br />Drag and drop files to be uploaded...<br /><br />
<input type="hidden" id="iFile" value="" /><input type="hidden" id="numFiles" value="" />
<div id="progressBar" style="width: 300px; height: 20px; border-radius: 20px; border: 1px solid rgb(0,0,0); opacity: 0; text-align: center; background: -moz-linear-gradient(left, rgb(32,96,160) 0%, rgb(32,96,160) 0%, rgb(255,255,255) 0%, rgb(255,255,255) 100%);">0%</div><br />
<div id="fileCase"></div>
</td>
// Note: The double ## is not a mistake. The code is running under
// ColdFusion where # is a is reserved character. So ## escapes the #
$(document).ready(function() {
function pad(number, digits) {
return Array(Math.max(digits - String(number).length + 1, 0)).join(0) + number;
}
function processFile(file,num,arr){
var inputRow = "<input type='hidden' value='' id='file_"+pad(arr,3)+"' name='file_"+pad(arr,3)+"' />";
$("##fileCase").append(inputRow);
var o = $("##file_"+pad(arr,3));
var reader = new FileReader();
reader.onload = function(e) {
o.val(e.target.result.replace(/</g, "<").replace(/>/g, ">"));
}
reader.readAsDataURL(file);
}
function updateProgress(idx,tot){
var midPt = Math.floor((idx)/tot*100);
$("##progressBar").css("background","-moz-linear-gradient(left, rgb(32,96,160) 0%, rgb(32,96,160) "+midPt+"%, rgb(255,255,255) "+midPt+"%, rgb(255,255,255) 100%)");
$("##progressBar").html(midPt+"%");
}
// Sets up dataTransfer event
jQuery.event.props.push('dataTransfer');
// File Array
var nameArray = [];
$("##fileCase").append("<input type='hidden' id='nameArray' value='' name='nameArray'>");
// Bind drop to drop zone
$('##drop-files').bind('drop', function(e) {
var iFile = 0;
// Prevents element from default function
e.preventDefault();
// Grabs list of files
var files = e.dataTransfer.files;
var numFiles = files.length;set("numFiles",numFiles);
$("##progressBar").animate({opacity: 1},500);
// Loop through files...
updateProgress(0,numFiles);
$.each(files, function(index, file) {
nameArray.push(files[index].name);
arr = nameArray.length;
$("##nameArray").val(nameArray.join("|"));
processFile(files[index],index+1,arr);
iFile++;set("iFile",iFile);
//setTimeout("updateProgress("+iFile+","+numFiles+");",250);
setTimeout("var midPt = Math.floor(get('iFile')/get('numFiles')*100);$('##progressBar').css('background','-moz-linear-gradient(left, rgb(32,96,160) 0%, rgb(32,96,160) '+midPt+'%, rgb(255,255,255) '+midPt+'%, rgb(255,255,255) 100%)');$('##progressBar').html(midPt+'%');",500)
});
});
});
它的伟大工程,除了一个小小的小东西。进度条似乎过快地达到100%。我宁愿慢一点,这样我就可以得到一些看起来很彻底的东西。
任何人都知道我可以如何减慢它,让我们实际上可以看到进度条的工作?
代码中的set()
和get()
功能只是快速的函数我做存储在隐藏输入表单元素变量允许setTimeout
功能工作。
欣赏你的想法。
'$(“## progressBar”)'?你的意思是$(“#progressBar”),对吧? – 2013-03-13 00:43:15
您可以通过上传更大的文件来减慢速度。 – ahren 2013-03-13 00:44:12
@MattBall,哦,对不起...... ##是因为我在基于ColdFusion的环境中运行这个程序,并且##转义#...道歉因为在开始时没有明确说明...... – 2013-03-13 00:48:20