我无法添加第二张图片。 第一个图像输入只工作

Question

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

Answer 1

Just change

<img id="previewImg"

To some classes in both form

<img class="previewImg"

Probably it's require changes in javascript code.

Change a way how you create a function. Do not run javascript function inside html code, remove it

onchange="previewFile(this);"

instead of this catch the action ie

function previewFile() {
$('.previewImg').on('change', function() {
 // use $(this) to catch clicked element only
  ... your code goes here
});

}

Answer 2

I will find some result. It works well. THankz who helps me

function previewFile(input) {

console.log(input);
var file = input.files[0];
console.log(file);

if(file){
    var reader = new FileReader();
    reader.onload = function(){
        $(input).closest('.imgLine').find('#previewImg').attr("src", reader.result);
    }
        reader.readAsDataURL(file);
}

}