FileReader API not displaying images. Please Help

JavaScript
1

I’m using The FileReader API to display images on the page.
Problem is I need multiple event listeners on the page all using the same ID selector name. Repeating the content.

I’ve tried adding these but none work:

document.querySelectorAll(“”);
document.getElementsByClassName

Thanks.



<input type="file" id="files" name="files[]" multiple />

<!--Generated Dynamically-->
<div id="list"></div>
<div id="list"></div>
<div id="list"></div>
<div id="list"></div>
<div id="list"></div>
<div id="list"></div>



<script>
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {


   // Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = ['<img class="thumb" src="', e.target.result,
                            '" title="', escape(theFile.name), '"/>'].join('');
          document.getElementById('list').insertBefore(span, null);
        };
      })(f);



  // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
2

First glance at your code, your divs are not NAMEd the same, they all have the same ID. Each element must have a unique ID. Two or more elements with the same ID causes conflict.

I’ve had issues with getElementsByClassName(). If you are using jQuery, you can give the divs all the same class name and use $(‘.list’) as the selector.

3

Sorry where exactly does the the $(‘.list’) selector go?
Thanks for replying.

<!--Generated Dynamically-->
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>



<script>
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
       

   // Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = ['<img class="thumb" src="', e.target.result,
                            '" title="', escape(theFile.name), '"/>'].join('');
          document.getElementsByClassName('list').insertBefore(span, null);
        };
      })(f);

    

  // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);
4

If you’re using jQuery, it can replace:

document.getElementsByClassName('list')
5

Think I’ve got a step closer with this. But now it’s not loading multiple images…


<input name="image" type="file" class="image" id="image" multiple>



    <div id="list"><img class="prevImg" src=""></div>
     <div id="list"><img class="prevImg" src=""></div>


$(document).ready(function(){


	$("#image").change(function(){
		
		var file = document.getElementById("image").files[0];

		var readImg = new FileReader();
		
		readImg.readAsDataURL(file);
		
		readImg.onload = function(e) {
			var span = document.createElement('span');
			$('.prevImg').attr('src',e.target.result).fadeIn();
			
			}
			
		})
		
		
})
6

Figured it out.

Mostly though google search that is, I can decipher some symbols and variable/functions, not enough to know if the
script below is javascript or $ jquery.

Thanks WolfShade and Pullo.

<input type='file' name="image" onchange="preview(this);" multiple="multiple" />
<div class='previewImg'></div>

<div class='previewImg'></div>
<div class='previewImg'></div>


window.preview = function (input) {
    if (input.files && input.files[0]) {
        $(input.files).each(function () {
            var reader = new FileReader();
            reader.readAsDataURL(this);
            reader.onload = function (e) {
                $(".previewImg").append("<img class='thumb' src='" + e.target.result + "'>");
            }
        });
    }
}