Geek Answers Handbook

Preview multiple images with multiple input files

How can I view multiple images downloaded from different inputs? The content from textarea is written inside the seeimg div when the button is clicked, the text field contains <img src="$img" id="img1"> , identifiers from 1 to 15 (img1, img2, img3 ... img15), and I need images uploaded by user to view inside seeimg div


HTML

 <form method="post" enctype="multipart/form-data" id="mainform"> Imagine 1:<br> <input type="file" name="img1" id="img1"><br> <br><br> Imagine 2 :<br> <input type="file" name="img2" id="img2"><br> <br> Imagine 3 :<br> <input type="file" name="img3" id="img3"><br> <br> Imagine 4 :<br> <input type="file" name="img4" id="img4"><br> <br> Imagine 5 :<br> <input type="file" name="img5" id="img5"><br> <br> Imagine 6 :<br> <input type="file" name="img6" id="img6"><br> <br> Imagine 7 :<br> <input type="file" name="img7" id="img7"><br> <br> Imagine 8 :<br> <input type="file" name="img8" id="img8"><br> <br> Imagine 9 :<br> <input type="file" name="img9" id="img9"><br> <br> Imagine 10 :<br> <input type="file" name="img10" id="img10"><br> <br> Imagine 11 :<br> <input type="file" name="img11" id="img11"><br> <br> Imagine 12 :<br> <input type="file" name="img12" id="img12"><br> <br> Imagine 13 :<br> <input type="file" name="img13" id="img13"><br> <br> Imagine 14 :<br> <input type="file" name="img14" id="img14"><br> <br> Imagine 15 :<br> <textarea id="insert" name="content"></textarea> <input type="file" name="img15" id="img15"><br> </form> <div id="seeimg"> </div>

So far, the scripts display only the image loaded into the first input file <input type="file" name="img1" id="img1"> , and if I continue to change the image of the first input, it changes the next, not the first. JQuery

  function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { console.log(e.target.result+" , "+i); $('#seeimg #img'+i).attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } $("form#mainform #img"+i).change(function(){ readURL(this); i++; });

TL DR - scripts that it works only for the first input of the file, and it changes the other img src if I upload another image.

Violin: https://jsfiddle.net/eLss3ojx/6/

+5
source share
2 answers

I tried very hard to understand the code, but I could understand that you have several files, and you want to show the preview to the user as an indication of when the file will be downloaded.

The approach is correct, but there is some basic error, you use the same identifier for img and the input type file , this will work, moreover, I could add a couple of errors. To help you survive, I changed the code that shows a preview of the various images.

HTML

  <form method="post" enctype="multipart/form-data" id="mainform"> Imagine 1:<br> <input type="file" name="img1" id="img1"><br> <img id="preview-img1" /> <br><br> Imagine 2 :<br> <input type="file" name="img2" id="img2"><br> <img id="preview-img2" /> <br> Imagine 3 :<br> <input type="file" name="img3" id="img3"><br> <img id="preview-img3" /> <br> Imagine 4 :<br> <input type="file" name="img4" id="img4"><br> <img id="preview-img4" /> <br> Imagine 5 :<br> <input type="file" name="img5" id="img5"><br> <img id="preview-img5" /> <br> Imagine 6 :<br> <input type="file" name="img6" id="img6"><br> <img id="preview-img6" /> <br> Imagine 7 :<br> <input type="file" name="img7" id="img7"><br> <img id="preview-img7" /> <br> Imagine 8 :<br> <input type="file" name="img8" id="img8"><br> <img id="preview-img8" /> <br> Imagine 9 :<br> <input type="file" name="img9" id="img9"><br> <img id="preview-img9" /> <br> Imagine 10 :<br> <input type="file" name="img10" id="img10"><br> <img id="preview-img10" /> <br> Imagine 11 :<br> <input type="file" name="img11" id="img11"><br> <img id="preview-img11" /> <br> Imagine 12 :<br> <input type="file" name="img12" id="img12"><br> <img id="preview-img12" /> <br> Imagine 13 :<br> <input type="file" name="img13" id="img13"><br> <img id="preview-img13" /> <br> Imagine 14 :<br> <input type="file" name="img14" id="img14"><br> <img id="preview-img14" /> <br> Imagine 15 :<br> <textarea id="insert" name="content"></textarea> <input type="file" name="img15" id="img15"><br> <img id="preview-img15" /> </form>

Javascript

  function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { imgId = '#preview-'+$(input).attr('id'); $(imgId).attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } $("form#mainform input[type='file']").change(function(){ readURL(this); });
+2
source

In your JSfiddle, you set src not on the image, but on the div. You must create an image element and add it to your div as follows:

 $('<img>').attr('id', '#pre_img' + i).attr('src', e.target.result).appendTo('#vezi');

instead

 $(principdiv+'#img'+i).attr('src', e.target.result);

Also, your code incorrectly binds change handlers. Instead, you should do something like this:

 $("#mainform input[id^='img']").change(function() { readURL(this); });

Jsfiddle

0
source

More articles:


All Articles