我不是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 =“ thumbnail -...”是下面的脚本中使用的那个。我知道这在脚本中不正确，但是我认为这是我遇到的问题。 我将在脚本部分进行解释。
<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，而我不知道如何选择。我希望能够为每个类别“上，下，左，右”选择1张图像。而且，如果可能的话，我也必须在另一面使用它，因为只有两面相同，所以只有3个类别。
#thumbnail是我在说的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>
实例将不胜感激！
答案 0 :(得分：0)
@misorude给出了答案
输入内容需要正确的onchange =“ readURL（）;”像这样：
<form name="filUpload" action="" method="post" enctype="form-data">
<div class="form-group">
<label for="name">Navn</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 billede</label>
<input onchange="readURL(this, '#thumbnail-Top');" class="form-control-file" type="file" name="userfile" id="file" />
</div>
<div class="form-group">
<label for="bottom">Bund billede</label>
<input onchange="readURL(this, '#thumbnail-Bottom');" class="form-control-file" type="file" name="userfile" id="file" />
</div>
<div class="form-group">
<label for="venstre-side">venstre-side</label>
<input onchange="readURL(this, '#thumbnail-Left');" class="form-control-file" type="file" name="userfile" id="file" />
</div>
<label for="hoejre-side">højre-side</label>
<div class="form-group">
<input onchange="readURL(this, '#thumbnail-Right');" class="form-control-file" type="file" name="userfile" id="file" />
</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>
应该在哪里显示图像，看起来像“它的样式不是真的”。
<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>
脚本如下所示，函数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]);
}
}