此代码仅显示单个选定的图像。列表中最后选择的图像。我认为循环位置不正确或附加代码不正确。我也尝试过更改位置,但同一件事仅显示单个图像。
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>
您将反复替换onload
单个的处理程序reader
,并且在更改URI之前不必等待图像加载。因此,您只能处理一张图像。
此外,当onload
处理程序开始执行时,它可能i
等于,count
因为它是异步执行的,for
到达零索引数组的末尾后,您将停止循环。
通过添加一些console.log()
语句,所有这些变得很清楚:
TypeError: Argument 1 of FileReader.readAsDataURL is not an object.
"Count: 3"
"readUrl: 0"
"readUrl: 1"
"readUrl: 2"
"readUrl: 3"
"onload: 3"
因此,显而易见的解决方法是不执行这些操作。首先,创建您的负载处理程序作为一个单独的函数,它不依赖于i
中for
环,那么你就可以重复使用它:
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
创建一个数组以容纳多个(而不是一个)(每个图像一个):
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]);
}
工作提琴。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句