0

I'm loading thumbnails before image upload starts with 

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);
}
}

which can last for a long time if many pictures selected.

I would like to show a dialogue or even a dialogue with progress bar while the thubnails are created.

can you please tell me how to do that?

and besideds that, if I use this script twice: are the pictures selected on the second run appended to the array "files" or are the replaced? please tell me how to append them so that you can choose pictures several times before you press an upload button.

thank you very much for your help!

user2814794
  • 81
  • 1
  • 1
  • 7

2 Answers2

0

i would recommend having a separate function toggling the display of the loading dialog, and calling it at the beginning and end of your function that is time consuming.

Ben P
  • 23
  • 5
0

<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>
Ramkumar
  • 181
  • 5