gpt4 book ai didi

javascript - 一次上传多张图片后如何显示多张图片? JS

转载 作者:行者123 更新时间:2023-12-03 06:01:14 27 4
gpt4 key购买 nike

我正在开发一个图像管理器,我想通过谷歌图像描述。目前我正在尝试将所有图像一次上传到服务器并显示它们,由于某种原因它只显示最后一个选择。

HTML

<input type='file' accept='image/*' multiple onchange="readURL(this);"/>
<div id="images-container"></div>
<label><strong>(Image will display above)</strong></label>

CSS

#blah {
display: block;
}

img {
width:100%;
}
.picContainer {
border: 1px dashed black;
margin: 10px;
padding: 10px;
width: 100px;
display: inline-block
}

JS

 $("input").change(function(e) {

for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {

var file = e.originalEvent.srcElement.files[i];

var div = document.createElement("div");
var img = document.createElement("img");
div.className = "picContainer";
var reader = new FileReader();
reader.onloadend = function() {
img.src = reader.result;
}
reader.readAsDataURL(file);
div.appendChild(img);
//$("input").after(div);
var container = document.getElementById("images-container");
container.appendChild(div);
} });

最佳答案

发生这种情况是因为 variable hoisting in javascript

编译器会重写您的代码,使其看起来像这样:

$("input").change(function(e) {
var i, file, div, img, container;
for (i = 0; i < e.originalEvent.srcElement.files.length; i++) {

file = e.originalEvent.srcElement.files[i];

div = document.createElement("div");
img = document.createElement("img");
div.className = "picContainer";
reader = new FileReader();
reader.onloadend = function() {
img.src = reader.result;
}
reader.readAsDataURL(file);
div.appendChild(img);
//$("input").after(div);
container = document.getElementById("images-container");
container.appendChild(div);
} });

这对你来说意味着什么,是在函数中

reader.onloadend = function() {
img.src = reader.result;
}

读取器和 img 变量始终等于最后一个(即使是第一个初始化的变量)

您可能应该使用在循环之前定义的函数创建器,如下所示:

$("input").change(function(e) {
function initOnReaderLoaded(img, reader){
return function(){
img.src = reader.result;
}
}
for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {

var file = e.originalEvent.srcElement.files[i];

var div = document.createElement("div");
var img = document.createElement("img");
div.className = "picContainer";
var reader = new FileReader();
reader.onloadend = initOnReaderLoaded(img, reader);
reader.readAsDataURL(file);
div.appendChild(img);
//$("input").after(div);
var container = document.getElementById("images-container");
container.appendChild(div);
} });

关于javascript - 一次上传多张图片后如何显示多张图片? JS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39745603/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com