gpt4 book ai didi

javascript - 多个图像预览未显示

转载 作者:行者123 更新时间:2023-11-30 08:42:03 25 4
gpt4 key购买 nike

此代码仅显示单个选定图像。在列表中选择的最后一个图像。我认为循环位置不正确或附加代码不正确。我也尝试过改变位置,但同样的事情只有一张图片显示。

function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader(),
count = input.files.length;
for(i=0;i<=count;i++){
reader.onload = function (e) {
//$('.image_preview_cont').html('<img src="'+e.target.result+'" />');
$('.image_preview_cont').append('<img src="#" id="img_preview'+i+'" />');
$('#img_preview'+i).attr('src',e.target.result);
}
reader.readAsDataURL(input.files[i]);
}
}
}

HTML:

<tr>
<td class="tdhead">Product Image</td><td><input type="file" name="p_image[]"
id="imgInp[]" multiple="true" onchange="readURL(this)" /><td>
</tr>
<tr>
<td colspan="2"><div class="image_preview_cont"></div></td>
</tr>

最佳答案

您正在重复替换单个 readeronload 处理程序,并且您没有在更改 URI 之前等待一个图像加载。所以你只能处理一张图像。

此外,当您的onload 处理程序开始执行时,i 可能等于count,因为它是异步执行的在到达零索引数组的末尾后,您将停止 for 循环一步。

所有这一切都随着 a few console.log() statements 的加入而变得清晰起来:

TypeError: Argument 1 of FileReader.readAsDataURL is not an object.
"Count: 3"
"readUrl: 0"
"readUrl: 1"
"readUrl: 2"
"readUrl: 3"
"onload: 3"

所以显而易见的解决方法是不要做那些事情。首先,将您的加载处理程序创建为一个独立的函数,它不依赖于 for 循环中的 i,然后您可以重用它:

function loadReader(e) {
var i = $('.image_preview_cont img').length;
$('.image_preview_cont').append('<img src="#" id="img_preview'+i+'" />');
$('#img_preview'+i).attr('src',e.target.result);
}

然后,不用一个 FileReader,而是创建一个数组来容纳多个 in(每个图像一个):

var readers = [],
count = input.files.length;

最后,修复 for 循环的终止条件并在其中创建 FileReader 对象:

for(i=0;i<count;i++){
readers[i] = new FileReader();
readers[i].onload = loadReader;
readers[i].readAsDataURL(input.files[i]);
}

Working fiddle .

关于javascript - 多个图像预览未显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25419853/

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