我的html代码是这样的:
<input type='file' multiple/>
<img id="myImg" src="#" alt="your image" />
我的 JavaScript 代码是这样的:
$(function () {
$(":file").change(function () {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
}
});
});
function imageIsLoaded(e) {
$('#myImg').attr('src', e.target.result);
};
演示是这样的:https://jsfiddle.net/oscar11/ob8aas23/
当我上传一张图片时,它会显示该图片
但是当我上传多于一张图片时,只显示一张图片
我怎么解决这个问题?
问题是只有一个img
标签,但要显示多个图像,数量相同img
需要标签。所以最好循环遍历files.length
并动态创建图像标签并向其添加源
$(function() {
$(":file").change(function() {
if (this.files && this.files[0]) {
for (var i = 0; i < this.files.length; i++) {
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[i]);
}
}
});
});
function imageIsLoaded(e) {
$('#myImg').append('<img src=' + e.target.result + '>');
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='file' multiple/>
<div id="myImg">
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)