javascript - Jquery FileReader 在缩略图中输入多个图像显示
问题描述
我有图像的文件输入,接受多个。我也有引导轮播,用于在上传之前进行少量演示。问题是:我有多个图像,所以我有多个 img src 代码。但是 jquery 只给了我 1 个带有 fileReader 的预览。我怎样才能使它成为可能?请帮我。
jsfiddle https://jsfiddle.net/6gsybxd9/1/
这是我的代码:
<div class="form-group">
<label>Img (.png/ .gif/ .jpeg):</label>
<input type="file" multiple="multiple" accept="image/x-png,image/gif,image/jpeg" / id="imgfiles">
</div>
<div class="box thumbnail col-md-2 col-xs-3" style="border-radius:0px">
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators" style="margin-bottom:-15px">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://via.placeholder.com/250x250" id="item_1">
</div>
<div class="item">
<img src="http://via.placeholder.com/250x250" id="item_2">
</div>
<div class="item">
<img src="http://via.placeholder.com/250x250" id="item_3">
</div>
</div>
</div>
和 Jquery 代码:
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#item_1').attr('src', e.target.result); //First img
$('#item_2').attr('src', e.target.result); // Second img
$('#item_3').attr('src', e.target.result); // Third img
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgfiles").change(function() {
readURL(this);
});
</script>
解决方案
如果用户添加了 4、5 或 10 张图像怎么办?
您必须相应地更新您的轮播:
function readURL(input) {
if (input.files && input.files[0]) {
var container = $('.carousel-inner').html(''),
indicators = $('.carousel-indicators').html('');
for (var f of input.files) {
var reader = new FileReader();
reader.onload = function(e) {
var n = container.children().length;
container.append(
`<div class="item ${n ? '' : 'active'}">
<img src="${e.target.result}">
</div>`
);
indicators.append(
`<li data-target="#carousel" data-slide-to="${n}" class="${n ? '' : 'active'}"></li>`
);
}
reader.readAsDataURL(f);
}
}
}
$("#imgfiles").change(function() {
readURL(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
<label>Img (.png/ .gif/ .jpeg):</label>
<input type="file" multiple="multiple" accept="image/*" / id="imgfiles">
</div>
<div class="thumbnail col-md-2 col-xs-3" style="border-radius:0px">
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators" style="margin-bottom:-15px">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://via.placeholder.com/250x250" id="item_1">
</div>
</div>
</div>
</div>
推荐阅读
- r - 1:nrow(SM) 中的错误:元数据文件的长度为 0 的参数
- matlab - 如何用 bvp4c Matlab 求解两个方程?
- unity3d - 在 Unity 中启动游戏时出现“无法启动 Oculus XR 插件”错误
- android-studio - 我可以将默认活动设置为来自不是基本模块的模块的活动吗?
- android - 如何在 SQLite 中实现 FNV-1(a)?
- java - 在 JTable (Java with swing) 上使用事件监听器时,变量有奇怪的行为
- vue.js - 为什么我使用 Promise 时手表不调用?
- ms-word - 尝试删除包含表中内容控件的行时,Word Addin 崩溃
- database - 为什么 Oracle PL/SQL 插入表不能使用游标?
- java - Java 并行流 forEach 完成