John Davidson

Message:

Why i cant access second file chooser. first file chooser work well.
This is HTML part

 <form action="<?php url("image/uploadImg"); ?>" method="post" enctype="multipart/form-data">

                <div class="imgLine">

                    <div class="line">

                        

                        <img id="previewImg" src="<?php echo BURL.'assets/img/addImg.svg'; ?>" alt="Placeholder">

                    </div>

                    <div class="line">

                        <!-- <input type="file" name="file"  onchange="previewFile(this);" required> -->

                        <label class="addFile">  Select File

                            <input type="file" name="file" size="60" onchange="previewFile(this);" required>

                        </label> 

                    </div>

                    <div class="line">

                        <input class="submitBtn" type="submit"  name="submit" value="Save">

                    </div>

                </div>



            </form>



            <form action="<?php url("image/uploadImg"); ?>" method="post" enctype="multipart/form-data">

                <div class="imgLine">

                    <div class="line">

                        

                        <img id="previewImg" src="<?php echo BURL.'assets/img/addImg.svg'; ?>" alt="Placeholder">

                    </div>

                    <div class="line">

                        <!-- <input type="file" name="file"  onchange="previewFile(this);" required> -->

                        <label class="addFile">  Select File

                            <input type="file" name="file" size="60" onchange="previewFile(this);" required>

                        </label> 

                    </div>

                    <div class="line">

                        <input class="submitBtn" type="submit"  name="submit" value="Save">

                    </div>

                </div>

This is jquery part

<script>

function previewFile(input){

    //console.log(input);

    var file = $("input[type=file]").get(0).files[0];

    //console.log(file);

    if(file){

        var reader = new FileReader();



        reader.onload = function(){

            $("#previewImg").attr("src", reader.result);

        }



        reader.readAsDataURL(file);

    }

}

What I am getting is upon uploading the second file. The function call. parameter values also pass. but
var file = $("input[type=file]").get(0).files[0] this file varible does not create.Please help

---

My Answer:
It looks like you are always selecting the first input element with type file in your jQuery code, which is why it is always getting the file from the first file input.

To fix this issue, you can modify your `previewFile` function to accept the input element as a parameter and then use that input element to get the file. Here's an updated version of your `previewFile` function:

javascript
function previewFile(input){
var file = input.files[0];
if(file){
var reader = new FileReader();

reader.onload = function(){
$(input).closest('.imgLine').find('#previewImg').attr("src", reader.result);
}

reader.readAsDataURL(file);
}
}


In this updated version, the `previewFile` function now accepts the input element as a parameter. It then uses that input element to get the file and find the corresponding preview image element within the same `.imgLine` container.

Make sure to update your HTML code to pass `this` as a parameter to the `previewFile` function when calling it in the `onchange` event:

html



With these changes, each file input will now work independently and correctly display the selected image in the corresponding preview image element.