Javascript Java脚本文件读取器如何使其成为多文件读取器？_Javascript

Javascript Java脚本文件读取器如何使其成为多文件读取器？

javascript

Javascript Java脚本文件读取器如何使其成为多文件读取器？,javascript,Javascript,我不是最擅长JS的，但我的网站需要它，我希望能够阅读我选择的文件这是输入 <form name="filUpload" action="" method="post" enctype="form-data"> <div class="form-group"> <label for="name">Name</label>

我不是最擅长JS的，但我的网站需要它，我希望能够阅读我选择的文件

这是输入

  <form name="filUpload" action="" method="post" enctype="form-data">
                        <div class="form-group">
                            <label for="name">Name</label>
                            <input type="text" name="name" id="name" class="form-control" value="" placeholder="name">
                        </div>
                        <!-- Image upload start -->
                            <div class="form-group">
                                <label for="Top">Top</label>
                                <input onchange="readURL(this, '#thumbnail-Top');"  class="form-control-file" type="file" name="userfile"/>
                            </div>
                            <div class="form-group">
                                <label for="Bottom">Bottom</label>
                                <input onchange="readURL(this);"  class="form-control-file" type="file" name="userfile"/>
                            </div>
                            <div class="form-group">
                                <label for="Left">Left</label>
                                <input onchange="readURL(this);"  class="form-control-file" type="file" name="userfile"/>
                            </div>
                                <label for="Right">Right</label>
                            <div class="form-group">
                                <input onchange="readURL(this);"  class="form-control-file" type="file" name="userfile"/>
                            </div>
                        </div>
                        <!-- Image upload end -->
                        <div class="input-group">
                            <input type="submit" style="" class="btn btn-success m-3" value="Submit" name="btn_type_send" />
                        </div>
                    </form>


名称
顶部
底部
左边
赖特

这就是图片显示的地方，id=“thumboil-…”是下面脚本中使用的。我知道剧本里写的不对，但我想这就是我的问题所在。我将在脚本部分解释

    <div class="">
           <div class="card m-2">
           <h4 class="card-header text-center">Images</h4>

                    <div class="d-flex">
                        <div class="flex-fill">
                        <h5 class="card-header">Top</h5>
                            <div class="card-body">
                                <img class="card-img text-center" alt="" id="thumbnail-Top" src="#" style=""/>
                            </div>
                        </div>

                        <div class="flex-fill">
                        <h5 class="card-header">Bottom</h5>
                            <div class="card-body">
                                <img class="card-img text-center" alt="" id="thumbnail-Bottom" src="#" style=""/>
                            </div>
                        </div>

                        <div class="flex-fill">
                        <h5 class="card-header">Left</h5>
                            <div class="card-body">
                                <img class="card-img text-center" alt="" id="thumbnail-Left" src="#" style=""/>
                            </div>
                        </div>

                        <div class="flex-fill">
                        <h5 class="card-header">Right</h5>
                            <div class="card-body">
                                <img class="card-img text-center" alt="" id="thumbnail-Right" src="#" style=""/>
                            </div>
                        </div>

                    </div>

           </div>
        </div>


图像
顶部
底部
左边
赖特

这是剧本。我认为我的问题是我需要选择多个ID，但我不知道如何选择。我想能够为每个类别“顶部、底部、左侧、右侧”选择一个图像。如果可能的话，我也必须在另一边使用它，那里只有3个类别，“因为两边是相同的”

缩略图就是我刚才说的id

<script type="text/javascript">
    function readURL(input, id) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
            $(id).attr('src', e.target.result);
        }
            reader.readAsDataURL(input.files[0]);
        }
    }
</script>


函数readURL（输入，id）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$（id）.attr（'src'，e.target.result）；
}
reader.readAsDataURL（input.files[0]）；
}
}

请举个例子，不胜感激

答案由@misorude给出
输入需要正确的onchange=“readURL（）；”如下所示：

纳文上钢坯外滩比勒德酒店文斯特侧 højre侧
图像应该显示的位置看起来像这样“它不是真正的样式”

图像顶部底部左边赖特
脚本如下所示，函数readURL被更正，而$（id）被更正

<script type="text/javascript"> function readURL(input, id) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $(id).attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } }

函数readURL（输入，id）{ if（input.files&&input.files[0]）{ var reader=new FileReader（）； reader.onload=函数（e）{ $（id）.attr（'src'，e.target.result）； } reader.readAsDataURL（input.files[0]）； } }

步骤1：修复HTML。ID在HTML文档中必须是唯一的。我没有解释对吗？如果您想让预览输出的元素保持动态，那么您可以将id作为第二个参数传递给readURL函数。您想在每个输入字段中选择一个图像，还是在每个字段中选择多个图像？（因为当前您的文件输入元素设置了
multiple
属性，不确定这是否是您在此处实际需要的。）您的意思是这样的，函数readURL（input，#id，）？
<div class="card m-2"> <h4 class="card-header text-center">Images</h4> <div class="d-flex"> <div class="flex-fill"> <h5 class="card-header">Top</h5> <div class="card-body"> <img class="card-img text-center" alt="" id="thumbnail-Top" src="#" style=""/> </div> </div> <div class="flex-fill"> <h5 class="card-header">Bottom</h5> <div class="card-body"> <img class="card-img text-center" alt="" id="thumbnail-Bottom" src="#" style=""/> </div> </div> <div class="flex-fill"> <h5 class="card-header">Left</h5> <div class="card-body"> <img class="card-img text-center" alt="" id="thumbnail-Left" src="#" style=""/> </div> </div> <div class="flex-fill"> <h5 class="card-header">Right</h5> <div class="card-body"> <img class="card-img text-center" alt="" id="thumbnail-Right" src="#" style=""/> </div> </div> </div> </div>

<script type="text/javascript"> function readURL(input, id) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $(id).attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } }