Preview images of 2 or more multiple input file

Question

I have 2 image fields and I want to display a preview before submitting the form. In the form below, it works by displaying multiple images, but I want each input to show its images separately as:

Input1 Input 1 images

Input 2 Input2 images

How do I do this?

<input id="fileupload" type="file" name="img_slide" multiple>
                  <div id="dvPreview">

<input id="fileupload2" type="file" name="img_capa" multiple>
              <div id="dvPreview2">

<script>
          window.onload = function () {

            var fileUpload = document.getElementById("fileupload");

        fileUpload.onchange = function () {
          if (typeof (FileReader) != "undefined") {
        var dvPreview = document.getElementById("dvPreview");
        dvPreview.innerHTML = "";
        var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
        for (var i = 0; i < fileUpload.files.length; i++) {
            var file = fileUpload.files[i];
            if (regex.test(file.name.toLowerCase())) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    var img = document.createElement("IMG");

                    img.height = "100";
                    img.width = "100";
                    img.src = e.target.result;
                    dvPreview.appendChild(img);
                    dvPreview.appendChild(textbox);
                }
                reader.readAsDataURL(file);
            } else {
                alert(file.name + " is not a valid image file.");
                dvPreview.innerHTML = "";
                return false;
            }
        }
    } else {
        alert("This browser does not support HTML5 FileReader.");
    }
}

};

Answer 1

I tried this and works for me. Code:

<pre>Please enter your files:<input class="fileupload" type="file" name="img_slide" multiple>
              <div id="dvPreview"></div></pre>

<input class="fileupload" type="file" name="img_capa" multiple>
          <div id="dvPreview2"></div>



window.onload = function () {

    var fileUpload = document.getElementsByClassName("fileupload");

    for(var i = 0; i < fileUpload.length; i++){
    fileUpload[i].onchange = showImgOnChange;
    }




}


var showImgOnChange = function () {

    if (typeof (FileReader) != "undefined") {
        var dvPreview = this.nextElementSibling;

        dvPreview.innerHTML = "";
        var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;

            for (var i = 0; i < this.files.length; i++) {
            var file = this.files[i];
            if (regex.test(file.name.toLowerCase())) {
            var reader = new FileReader();
            reader.onload = function (e) {
                var img = document.createElement("IMG");

                img.height = "100";
                img.width = "100";
                img.src = e.target.result;
                dvPreview.appendChild(img);
                dvPreview.appendChild(textbox);
            }
            reader.readAsDataURL(file);
            } else {
            alert(file.name + " is not a valid image file.");
            dvPreview.innerHTML = "";
            return false;
            }

                    }
        } else {
        alert("This browser does not support HTML5 FileReader.");
        }
}

Now i will explain that code:

i use a single class for every input of that type. Using that class i get all the elements input and at every input i assign onchange the function showImgOnChange (just a trick to associate the same function on change to multiple elements). After that, in the function, to generalize this:

var dvPreview = document.getElementById("dvPreview");

I used this:

var dvPreview = this.nextElementSibling;

This takes the next element to the this element in the DOM. Otherwise you can associate a class to divs wich you would display the images and search for the next elements to this having that class.

Hope it helps