Home/ Questions/Q 7645403
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T09:55:59+00:00

It’s one of those silent browser bugs where the browser refuses to execute the

  • 0

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 example.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.

Would someone explain the silent bug issue in detail (which I’ve gotten around by using setTimeOut in previous situations)?

example.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Image Preview</title>
<script type="text/javascript">
//<![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 < document.getElementById('post_files').files.length; i++)
 {
  var f = document.getElementById('post_files').files[i];
  fr.readAsDataURL(f);
 }
}
//]]>
</script>
</head>

<body>

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

<div id="images_preview"></div>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Turns out that the onloadend method is what I needed. Here is a fully fixed/working version of what I coded above…

    <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Image Preview</title>
<script type="application/javascript">
//<![CDATA[
function images_preview()
{
 for (var i = 0; i < document.getElementById('post_files').files.length; i++)
 {
  var fr = new FileReader();
  var dataurl = fr.readAsDataURL(document.getElementById('post_files').files[i]);

  fr.onloadend = function(e)
  {
   var thumb = document.createElement('img');
   thumb.setAttribute('src',e.target.result);
   document.getElementById('images_preview').appendChild(thumb);
  }
 }
}
//]]>
</script>
</head>

<body>

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

<div id="images_preview"></div>

</body>
</html>
    • 0