在功能运行时显示对话

时间:2015-04-02 08:40:03

标签: javascript loader

我在使用

开始图片上传之前加载缩略图
window.URL = window.URL || window.webkitURL;

function fileThumbnail(files)
{
var thumb = document.getElementById("thumbnail");
// thumb.innerHTML = "";
if(!files)
return;
for (var i = 0; i < files.length; i++)
{
var file = files[i];

if(!file.type.match(/image.*/))
continue;

var img = document.createElement("img");
img.src = window.URL.createObjectURL(file);
img.width = 100;

img.onload = function(e) {
window.URL.revokeObjectURL(this.src);
};

thumb.appendChild(img);
}
}

如果选择了很多照片,可能会持续很长时间。

我希望在创建thubnails时显示对话框或与进度条对话。

你能告诉我怎么做吗?

并且旁白,如果我使用这个脚本两次:第二次运行时选择的图片是附加到数组“files”还是被替换?请告诉我如何附加它们,以便在按下上传按钮之前可以多次选择图片。

非常感谢你的帮助!

2 个答案:

答案 0 :(得分:0)

我建议使用单独的功能切换加载对话框的显示,并在功能的开头和结尾调用它是非常耗时的。

答案 1 :(得分:0)

&#13;
&#13;
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
   <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  
</head>
<body>

<div id="progressbar" ></div>

</body>
<script>
var process=0;
function transition()
{
process+=5;
		$( "#progressbar" ).progressbar({
		  value: process
		});
		
if(process==100)
process=0;

}
 setInterval(transition, 200);
</script>
</html>
&#13;
&#13;
&#13;