(HTML + JS问题)将图像从输入类型文件加载到img
(HTML + JS问题)将图像从输入类型文件加载到img
提问于 2019-03-21 00:32:55
我在尝试将多个图像(从输入类型文件)加载到。
我将此代码用于一个文件：
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#img')
.attr('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}在多个图像的情况下，我有这样的HTML：
<section class="image-group">
<label class="lb_form" for="txt_img">Foto: </label><br><br>
<div class="img">
<img id="img0">
<img id="img1">
<img id="img2">
<img id="img3">
<img id="img4">
</div><br>
<div class="upload-btn-wrapper">
<input type="button" value="Selecionar" class="frm-input btn">
<!--onchange="readURL(this)"-->
<input type="file" onchange="readURL(event)" id="files" name="txt_img" value="Selecionar" multiple>
</div><br><br>
</section>每个图像必须在#img中的一个中。
谢谢。
回答 1
Stack Overflow用户
发布于 2019-03-21 00:47:16
你可以这样做：
function readURL(event) {
let input = event.target;
if (input.files) {
Array.from(input.files).forEach((f, i) => {
var reader = new FileReader();
reader.onload = function(e) {
$('#img' + i).attr('src', e.target.result);
};
reader.readAsDataURL(f);
});
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="image-group">
<label class="lb_form" for="txt_img">Foto: </label><br><br>
<div class="img">
<img id="img0">
<img id="img1">
<img id="img2">
<img id="img3">
<img id="img4">
</div><br>
<div class="upload-btn-wrapper">
<input type="button" value="Selecionar" class="frm-input btn">
<!--onchange="readURL(this)"-->
<input type="file" onchange="readURL(event)" id="files" name="txt_img" value="Selecionar" multiple>
</div><br><br>
</section>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55265803
复制相关文章
相似问题
腾讯云开发者
