How to show image on multiple browse

Question

My task is i have added multiple browse file clicking on add more button at the same time i have to view the file also after browsing the file for this i have used below code and i have succeded to browse the file on one browse box but i was unable to view all the image simultaneously.I am not getting how to do this

my check.html file

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 <script src="custom.js" type="text/javascript"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>




<div class="file_wrapper" id="file_wrapper">
<div>
 <span class="btn btn-default btn-file"><i class="fa fa-upload"></i>                                            
     Select Image<input id="fileupload" class="fileupload" type="file" name="userFiles[]"   required/>
 </span> &nbsp;&nbsp;
 <span class="btn btn-success">
     <a href="javascript:void(0);" class="add_image" title="Add field">
<span class="glyphicon glyphicon-plus" >Add more</span>
     </a>
</span>
</div>
 </div>                                                 

<hr />
<b>Live Preview</b>
<br />
<br />
<div id="dvPreview">
</div>

my second custom.js file is

      // Add More field script
$(document).ready(function(){
    var maxField = 10; //Input fields increment limitation
    var addButton = $('.add_image'); //Add button selector
    var wrapper = $('.file_wrapper'); //Input field wrapper
    var fieldHTML = '<div><span class="btn btn-default btn-file"><i class="fa fa-upload"></i>Select Image<input id="fileupload" class="fileupload" type="file" name="userFiles[]"  required/></span> &nbsp;&nbsp;<a href="javascript:void(0);" class="remove_button" title="Remove field"><span class="btn btn-success"><span class="glyphicon glyphicon-minus">Remove</span></span></a></div>';
    var x = 1; //Initial field counter is 1
    $(addButton).click(function(){ //Once add button is clicked
        if(x < maxField){ //Check maximum number of input fields
            x++; //Increment field counter
            $(wrapper).append(fieldHTML); // Add field html
        }
    });
    $(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
        e.preventDefault();
        $(this).parent('div').remove(); //Remove field html
        x--; //Decrement field counter
    });
});





$(function () {
    // View Image on Browse Script
    $(".fileupload").change(function () {
        if (typeof (FileReader) != "undefined") {
            var dvPreview = $("#dvPreview");
            dvPreview.html("");
            var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
            $($(this)[0].files).each(function () {
                var file = $(this);
                if (regex.test(file[0].name.toLowerCase())) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        var img = $("<img />");
                        img.attr("style", "height:200px;width: 300px");
                        img.attr("src", e.target.result);
                        dvPreview.append(img);
                    }
                    reader.readAsDataURL(file[0]);
                } else {
                    alert(file[0].name + " is not a valid image file.");
                    dvPreview.html("");
                    return false;
                }
            });
        } else {
            alert("This browser does not support HTML5 FileReader.");
        }
    });
});

Please help me Thanks in Advance

Answer 1

every time you choose new image you remove previous one so delete first dvPreview.html("");

      // Add More field script
$(document).ready(function(){
    var maxField = 10; //Input fields increment limitation
    var addButton = $('.add_image'); //Add button selector
    var wrapper = $('.file_wrapper'); //Input field wrapper
    var fieldHTML = '<div><span class="btn btn-default btn-file"><i class="fa fa-upload"></i>Select Image<input id="fileupload" class="fileupload" type="file" name="userFiles[]"  required/></span> &nbsp;&nbsp;<a href="javascript:void(0);" class="remove_button" title="Remove field"><span class="btn btn-success"><span class="glyphicon glyphicon-minus">Remove</span></span></a></div>';
    var x = 1; //Initial field counter is 1
    $(addButton).click(function(){ //Once add button is clicked
        if(x < maxField){ //Check maximum number of input fields
            x++; //Increment field counter
            $(wrapper).append(fieldHTML); // Add field html
        }
    });
    $(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
        e.preventDefault();
        $(this).parent('div').remove(); //Remove field html
        x--; //Decrement field counter
    });
});





$(function () {
    // View Image on Browse Script
    $(".fileupload").change(function () {
        if (typeof (FileReader) != "undefined") {
            var dvPreview = $("#dvPreview");
            //dvPreview.html("");
            var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
            $($(this)[0].files).each(function () {
                var file = $(this);
                if (regex.test(file[0].name.toLowerCase())) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        var img = $("<img />");
                        img.attr("style", "height:200px;width: 300px");
                        img.attr("src", e.target.result);
                        dvPreview.append(img);
                    }
                    reader.readAsDataURL(file[0]);
                } else {
                    alert(file[0].name + " is not a valid image file.");
                    //dvPreview.html("");
                    return false;
                }
            });
        } else {
            alert("This browser does not support HTML5 FileReader.");
        }
    });
});