Javascript Image Preview on multiple Input files

Question

How do I preview the images on multiple input files.

html:

<form id="form1" runat="server">
   <input type='file' id="imgInp" />
   <img id="blah" src="#" alt="your image" />
   <input type='file' id="imgInp2" />
   <img id="blah2" src="#" alt="your image" />
   <input type='file' id="imgInp3" />
   <img id="blah3" src="#" alt="your image" />
</form>

jquery:

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

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

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

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

That code worked on one input type file, but I do not know how to modifiy it to get more then one preview.

Rory McCrossan · Accepted Answer · 2016-02-17 10:29:21Z

3

You should use common classes to group the elements. That way you can have a single event handler. You can then find the img element from the current input using next(). Try this:

<form id="form1" runat="server">
    <input type='file' class="imgInp" />
    <img class="blah" src="#" alt="your image" />
    <input type='file' class="imgInp" />
    <img class="blah" src="#" alt="your image" />
    <input type='file' class="imgInp" />
    <img class="blah" src="#" alt="your image" />
</form>

function readURL() {
    var $input = $(this);
    if (this.files && this.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            $input.next('.blah').attr('src', e.target.result).show();
        }
        reader.readAsDataURL(this.files[0]);
    }
}

$(".imgInp").change(readURL);

Working example

answered Feb 17, 2016 at 10:29

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

John Does Legacy Over a year ago

Thanks worked, you may know a way to show pdfs and doc files aswell?

Rory McCrossan Over a year ago

I don't believe that's possible, at least not very reliably. You could potentially do it in an iframe, but it would depend on the users' browser settings whether or not the file is downloaded or displayed.

utdev Over a year ago

@RoryMcCrossan your script has a bug, but I do not know why, if one picks a file which is e.g. bigger then 2gigs one gets an error

Rory McCrossan Over a year ago

That's a browser/OS implementation issue. Frankly if you need to transfer 2Gb files, uploading through a web browser is the last way you should be doing it.

Rayon · Accepted Answer · 2016-02-17 10:35:04Z

id selector(#) will select only first matched element.

Use $('input[type="file"]') to select all elements having type as file

.next(selector) will return immediately following sibling of each element in the set of matched elements

Try this:

function readURL(input) {
  var elem = $(input);
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
      elem.next('img').attr('src', e.target.result);
    }
    reader.readAsDataURL(elem.get(0).files[0]);
  }
}

$("input[type='file']").change(function() {
  readURL(this);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="form1" runat="server">
  <input type='file' id="imgInp" />
  <img id="blah" src="#" alt="your image" />
  <input type='file' id="imgInp2" />
  <img id="blah2" src="#" alt="your image" />
  <input type='file' id="imgInp3" />
  <img id="blah3" src="#" alt="your image" />
</form>

Fiddle here

Collectives™ on Stack Overflow

Javascript Image Preview on multiple Input files

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related