JavaScript: multiple images fail to display using data URI: silent browser bug
<p>It's one of those silent browser bugs where the browser refuses to execute the full request. The code below (just make a file called exaple.xhtml to test it out, make sure you don't have a byte order mark by using Microsoft based editors) is all the working code. When you select multiple images it only displays one of the images in Firefox, Opera and Chrome.</p>

<p>If someone can explain the silent bug issue in detail (which I've gotten around by using setTimeOut in previous situations) I'll up-vote their answer on top of accepting it as the answer.</p>

<p><strong>example.xhtml</strong></p>

<pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt;
&lt;head&gt;
&lt;title&gt;Image Preview&lt;/title&gt;
&lt;script type="text/javascript"&gt;
//&lt;![CDATA[

var fr = new FileReader();

fr.onload = function(e)
{
 var thumb = document.createElement('img');
 thumb.setAttribute('src',e.target.result);
 document.getElementById('images_preview').appendChild(thumb);
}


function images_preview()
{
 for (var i = 0; i &lt; document.getElementById('post_files').files.length; i++)
 {
  var f = document.getElementById('post_files').files[i];
  fr.readAsDataURL(f);
 }
}
//]]&gt;
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;form action="" method="post" enctype="multipart/form-data"&gt;
&lt;fieldset&gt;
 &lt;input id="post_files" name="post_files" multiple="multiple" onchange="images_preview();" size="256" type="file" /&gt;
&lt;/fieldset&gt;
&lt;/form&gt;

&lt;div id="images_preview"&gt;&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
