Jquery Problem.For More that 1 Image upload Preview

Question

I have an issue. I want to see Preview of my selected Image before upload. My Codes are working perfect for Only 1 Image upload. When i make 4 Places to upload photos. 4 Different 4 photos, Then This not work. I tried to change IDs, Classes also for each upload. But Failed.

My Codes are here.. HTML

<div class="input-sec">

                    <label class="p-label" for="rear"><span style="font-size:15px;font-weight:bold;">Rear</span><br>
                    <img id="output" src="images/upload_placeholder.jpg" class="pre_img">

                    </label>

                    <input type="file" id="rear" name="rear" value="" onchange="loadFile(event)" style="color:white;">


                    </div>

CSS is Here

.input-sec > input[type="file"]
{
    display: none;
}

.input-sec img
{
    height: 200px;
    cursor: pointer;
}

Jquery Is Here.

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

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

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

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

My Problem is When i add only 1 Photo upload field on a page, It works. But when i try to add More than 1 Image upload fields on same, Then no one work.I also tried changing its IDs for each upload and Jquery. but failed. Please help me.

Answer 1

I got it Fixed.

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

                reader.onload = function (e) {
                    $('#file11')
                        .attr('src', e.target.result)
                        .width(200)
                        .height(200);
                };

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

                reader.onload = function (e) {
                    $('#file21')
                        .attr('src', e.target.result)
                        .width(200)
                        .height(200);
                };

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

                reader.onload = function (e) {
                    $('#file31')
                        .attr('src', e.target.result)
                        .width(200)
                        .height(200);
                };

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

                reader.onload = function (e) {
                    $('#file41')
                        .attr('src', e.target.result)
                        .width(200)
                        .height(200);
                };

                reader.readAsDataURL(input.files[0]);
            }
        }       
</script>

And THIS HTML is Here..

<div class="input-sec">

                    <label class="p-label" for="file1"><span style="font-size:15px;font-weight:bold;">Front</span><br>
                    <img id="file11" src="images/upload_placeholder.jpg" class="pre_img">

                    </label>

                    <input type="file" id="file1" name="file1" value="" accept="image/x-png, image/gif, image/jpeg" required onchange="readURL(this);"  style="color:white;">


                    </div>

                    <div class="input-sec">

                    <label class="p-label" for="file2"><span style="font-size:15px;font-weight:bold;">Rear</span><br>
                    <img id="file21" src="images/upload_placeholder.jpg" class="pre_img">

                    </label>

                    <input type="file" id="file2" name="file2" value="" accept="image/x-png, image/gif, image/jpeg" required onchange="readURL1(this);" style="color:white;">


                    </div>



                    </div>

                    <div class="r-parent">

                    <div class="input-sec">

                    <label class="p-label" for="file3"><span style="font-size:15px;font-weight:bold;">Driver Side</span><br>
                    <img id="file31" src="images/upload_placeholder.jpg" class="pre_img">

                    </label>

                    <input type="file" id="file3" name="file3" value="" accept="image/x-png, image/gif, image/jpeg" required onchange="readURL2(this);" style="color:white;">


                    </div>

                     <div class="input-sec">

                    <label class="p-label" for="file4"><span style="font-size:15px;font-weight:bold;">Customer Side</span><br>
                    <img id="file41" src="images/upload_placeholder.jpg" class="pre_img">

                    </label>

                    <input type="file" id="file4" name="file4" value="" accept="image/x-png, image/gif, image/jpeg" required onchange="readURL3(this);" style="color:white;">


                    </div>

Fixed It.

Answer 2

change the id to frontpre1, frontpre2, frontpre3, frontpre4 and front1, front2, front3, front4 and create 4 different function to call. Also you can go for

http://codepedia.info/html5-filereader-preview-image-show-thumbnail-image-before-uploading-on-server-in-jquery/