Loop through javascript for image previews

Question

I'm currently getting to grips with html5 API image uploading and I'm a bit stuck with some javascript (way out my comfort zone) involved.

This is a snippet of my upload table (it also involves data collection for each image not shown here for things like renaming the image etc):

<tr>
<td>Image '.$i.':</td><td><output id="display'.$i.'"></output></td>
</tr>

<tr>
<td>Choose Image:</td>
<td><input name="file'.$i.'" type="file" id="file'.$i.'"  accept="image/*" /></td>
</tr>

$i is a php counter, the user selects how many photos they will upload and it creates that many image boxes.

This is the javascript used to show an image preview:

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

function handleFileSelect(evt) {
        var files = evt.target.files;
        var f = files[0];
        var reader = new FileReader();

          reader.onload = (function(theFile) {
                return function(e) {
                  document.getElementById('display1').innerHTML = ['<img src="', e.target.result,'" title="', theFile.name, '" width="100" />'].join('');
                };
          })(f);

          reader.readAsDataURL(f);
}

My question is, being a javascript novice, is there a simple way to loop the script for each image. Currently it will only show the preview for 'file1', is there a way to change the '1' to something like $i, $i++ used for php loops? lets say the number of image boxes is stored as the php varible $totelboxes

EDIT: this is where I am so far:

var upFiles = document.getElementsByClassName('upFile');

for(var i = 0; i < upFiles.length; i++)
{
    upFiles[i].addEventListener('change', handleFileSelect, false);

function handleFileSelect(evt) {
        var files = evt.target.files;
        var f = files[0];
        var reader = new FileReader();

          reader.onload = (function(theFile) {
                return function(e) {
                  document.getElementById('display'+i).innerHTML = ['<img src="', e.target.result,'" title="', theFile.name, '" width="100" />'].join('');
                };
          })(f);

          reader.readAsDataURL(f);
}
}

score 0 · Answer 1 · edited May 23 '17 at 12:20

You can give all your file inputs a class, then use document.getElementsByClassName and a for loop. (Note, for this to work in IE 8- you may need a shim, although you've probably forgone IE8 anyway by using addEventListener. See javascript document.getElementsByClassName compatibility with IE)

For example:

HTML:

<input id="file1" ... class="upFile" />
<input id="file2" ... class="upFile" />

JavaScript:

var upFiles = document.getElementsByClassName('upFile');

for(var i = 0; i < upFiles.length; i++)
{
    upFiles[i].addEventListener(/*...*/);
}

Or, you can use jQuery for this, using your existing HTML and matching the first part of the ID:

$('input[type="file"][id^="file"]').change(handleFileSelect);

This matches all input elements with a type of "file" and an ID starting with "file".

@Ic. thanks for the response. I have tried to implement your code but must have done something wrong. On my test page I have 4 image upload boxes, whichever I select an image with the preview shows in the 4th output box. If I select a different box it still replaces the image in the 4th. I have put this new code in the edit. Thanks — user2574794, Sep 11 '13 at 01:42

score 0 · Answer 2 · answered Sep 11 '13 at 01:17

You can us class names (document.getElementsByClassName) to do work for all your input file fields, little bit of jquery(not necessary)

document.getElementsByClassName('fileClassName').addEventListener('change', handleFileSelect, false);

function handleFileSelect(evt) {
        var files = evt.target.files;
        var f = files[0];
        var reader = new FileReader();

          reader.onload = (function(theFile) {
                return function(e) {
                  var relativeid= $(this).attr('id').replace("file",""); 
                  document.getElementById('display'+relativeid).innerHTML = ['<img src="', e.target.result,'" title="', theFile.name, '" width="100" />'].join('');
                };
          })(f);

          reader.readAsDataURL(f);
}

Loop through javascript for image previews

2 Answers2