How to preview multiple inputs

Question

I want to preview images, that the user is about to upload. Now, I know that my code works for one input and one image. As soon as I add another pair of input and image, same as the one wich worked, no image is there to preview...

How can I add more inputs, each with its own image to preview that specific input?

My code looks like this:

HTML:

<input type="file" accept="image/*" onchange="previewFile()">
<img id="output1" height="100px">

and Javascript:

function previewFile(){
        var preview = document.querySelector('img');
        var file    = document.querySelector('input[type=file]').files[0];
        var reader  = new FileReader();

        reader.onloadend = function () {
            preview.src = reader.result;
        }

        if (file) {
            reader.readAsDataURL(file);
        }
        else {
            preview.src = "";
        }
    }

I think that a Var has to be given to the function, which output I want to choose, but I am totally new to Js, so maybe You can help me!

Thanks!

Edit:

I don't want to have a "multiple" attribute in my input tag. I created multiple divs, each with a non-visible input tag and an image that overlays with absolute position. So when the user clicks the div, he can choose an image, which then fills up the whole div.

It all works fine for one div but I need 11 more, each working seperately, so that the user can manage the order of his pictures he is about to upload.

So what do I have to do to make each of the 12 upload tags working seperately with its own preview image?

your code dosent have any error...try to test it via firefox 48. — Mostafa, Aug 20 '16 at 05:09
This post will help you http://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded — Imax, Aug 20 '16 at 05:16
Maybe you are using the same ids? Ids must be unique in a web page. — rm4, Aug 20 '16 at 05:17
_"As soon as I add another pair of input and image, same as the one wich worked"_ `Element.id` in `document` should be unique. You can use single `` element with `multiple` attribute set to allow user to upload multiple files at single `change` event. — guest271314, Aug 20 '16 at 05:24

guest271314 · Accepted Answer · 2016-08-20T14:23:28.473

Edit:

I don't want to have a "multiple" attribute in my input tag. I created multiple divs, each with a non-visible input tag and an image that overlays with absolute position. So when the user clicks the div, he can choose an image, which then fills up the whole div.

It all works fine for one div but I need 11 more, each working seperately, so that the user can manage the order of his pictures he is about to upload.

So what do I have to do to make each of the 12 upload tags working seperately with its own preview image?

Element.id should be unique in document. You can pass the clicked element to previewFile() call, use .nextElementSibling to select sibling <img> element

function previewFile(input) {
  var preview = input.nextElementSibling;
  var file = input.files[0];
  var reader = new FileReader();

  reader.onloadend = function() {
    preview.src = reader.result;
  }

  if (file) {
    reader.readAsDataURL(file);
  } else {
    preview.src = "";
  }
}

<div>
  <input type="file" multiple accept="image/*" onchange="previewFile(this)">
  <img height="100px" />
</div>
<div>
  <input type="file" multiple accept="image/*" onchange="previewFile(this)">
  <img height="100px" />
</div>
<div>
  <input type="file" multiple accept="image/*" onchange="previewFile(this)">
  <img height="100px" />
</div>
<div>
  <input type="file" multiple accept="image/*" onchange="previewFile(this)">
  <img height="100px" />
</div>
<div>
  <input type="file" multiple accept="image/*" onchange="previewFile(this)">
  <img height="100px" />
</div>
<div>
  <input type="file" multiple accept="image/*" onchange="previewFile(this)">
  <img height="100px" />
</div>
<div>
  <input type="file" multiple accept="image/*" onchange="previewFile(this)">
  <img height="100px" />
</div>
<div>
  <input type="file" multiple accept="image/*" onchange="previewFile(this)">
  <img height="100px" />
</div>
<div>
  <input type="file" multiple accept="image/*" onchange="previewFile(this)">
  <img height="100px" />
</div>
<div>
  <input type="file" multiple accept="image/*" onchange="previewFile(this)">
  <img height="100px" />
</div>
<div>
  <input type="file" multiple accept="image/*" onchange="previewFile(this)">
  <img height="100px" />
</div>
<div>
  <input type="file" multiple accept="image/*" onchange="previewFile(this)">
  <img height="100px" />
</div>

Thank you very much! This works almost like I want it to! Do you have a tip for me how to select the if it is inside a div inside the div? — jonas.ley, Aug 20 '16 at 17:47
@JonasLey _"Do you have a tip for me how to select the if it is inside a div inside the div?"_ You can set a `className` at each `div` which contains an `` element, then use `document.querySelectorAll()`; `var divs = document.querySelectorAll(".divContainsPreview")`, then select `div` specific index, for example, at index `0`, and use `Element.querySelector()` `divs[0].querySelector("img")` — guest271314, Aug 20 '16 at 18:04

score 0 · Answer 2 · answered Aug 20 '16 at 05:15

window.URL    = window.URL || window.webkitURL;
var elBrowse  = document.getElementById("browse"),
    elPreview = document.getElementById("preview"),
    useBlob   = false && window.URL; // `true` to use Blob instead of Data-URL

function readImage (file) {
  var reader = new FileReader();
  reader.addEventListener("load", function () {
    var image  = new Image();
    image.addEventListener("load", function () {
      var imageInfo = file.name    +' '+
                      image.width  +'×'+
                      image.height +' '+
                      file.type    +' '+
                      Math.round(file.size/1024) +'KB';
      elPreview.appendChild( this );
      elPreview.insertAdjacentHTML("beforeend", imageInfo +'<br>');
    });
    image.src = useBlob ? window.URL.createObjectURL(file) : reader.result;
    if (useBlob) {
      window.URL.revokeObjectURL(file); // Free memory
    }
  });
  reader.readAsDataURL(file);  
}

elBrowse.addEventListener("change", function() {
  var files  = this.files;
  var errors = "";
  if (!files) {
    errors += "File upload not supported by your browser.";
  }
  if (files && files[0]) {
    for(var i=0; i<files.length; i++) {
      var file = files[i];
      if ( (/\.(png|jpeg|jpg|gif)$/i).test(file.name) ) {
        readImage( file ); 
      } else {
        errors += file.name +" Unsupported Image extension\n";  
      }
    }
  }
  if (errors) {
    alert(errors); 
  }
});

#preview img{height:100px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input id="browse" type="file"  multiple />
<div id="preview"></div>

How to preview multiple inputs

2 Answers2