How to show multiple images selected "input file"?

Question

here is an example: http://jsfiddle.net/LvsYc/9714/

When you select 4 different images, the 4 images are the same when showing on the screen.

HTML:

<form id="form1" runat="server">
    <input type='file' id="imgInp" multiple />
    <img id="blah" src="#" width="100" />

    <img id="blah1" src="#" width="100" />

    <img id="blah2" src="#" width="100" />

    <img id="blah3" src="#" width="100" />
</form>

JS:

 function readURL(input) {        

        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#blah').attr('src', e.target.result);
                $('#blah1').attr('src', e.target.result);
                $('#blah2').attr('src', e.target.result);
                $('#blah3').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#imgInp").change(function(){
        readURL(this);
    });

Answer 1

There are some flaws in your code; in my view, the correct thing would be for you to learn how it works and redo it. Follow this explanatory code.

The first logic of all is to mount html. The first defect found in your code is <input type='file' id="imgInp" multiple /> where you defer to have defined the property name to receive the keys.

Correcting that part, you should do something like this

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

Another problem in your code is that you are creating 4 Ivs, each to receive a different image, another defect, since you can create only one div to receive the values; it works the same, works and is better.

To solve this, in the code above I put only a div call resultados that will receive all images.

Now in your Javascript is where the biggest defect is. You are always playing the first key for both Divs.

What’s right is you do it this way

  function readURL(evt) {
    var files = evt.target.files;

    for (var i = 0, f; f = files[i]; i++) {

      if (!f.type.match('image.*')) {
        continue;
      } //verifica se os arquivos são imagens

      var reader = new FileReader();

      reader.onload = (function(filei) {
        return function(e) {

          var tag = document.createElement('span');
          tag.innerHTML = ['<img src="', e.target.result,
                            '" title="', escape(filei.name), '"/>'].join('');
          document.getElementById('resultados').insertBefore(tag, null);
        };
      })(f);
      reader.readAsDataURL(f);
    }
  }

  document.getElementById('file').addEventListener('change', readURL, false);

You can view this code in action on Jsfiddle.