时间戳

首页 > 解决方案 > 我无法添加第二张图片。第一个图像输入只工作

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

问题描述

为什么我无法访问第二个文件选择器。第一个文件选择器运行良好。 这是 HTML 部分

 <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>

这是jQuery部分

<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);
    }
}

我得到的是上传第二个文件。函数调用。参数值也通过。但是 var file = $("input[type=file]").get(0).files[0]这个文件变量没有创建。请帮忙

标签： javascriptphphtmljquery

解决方案

我会找到一些结果。它运作良好。谢谢谁帮助我

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);
}

}

推荐阅读