在forEach循环中使用Javascript FileReader追加元素
在forEach循环中使用Javascript FileReader追加元素
提问于 2020-09-17 04:55:25
我正在使用FileReader向预览元素插入超文本标记语言。这部分是有效的。但是，我需要在插入元素后对其进行操作。当我尝试用(let previews =document.querySelectorAll(‘.fb-预览li');)选择插入的元素时，我得到了and空节点数组。
我的印象是forEach阻塞了，当循环结束时，我应该能够选择插入的html元素。
关于FileReader或forEach循环，我是不是遗漏了什么？
如果我添加一个setTimeout就可以了，但这看起来有点像黑客。
items.forEach(v => {
const preview = document.querySelector('.fb-preview');
const reader = new FileReader();
reader.addEventListener('load', () => {
switch (v.type) {
case 'application/pdf':
preview.insertAdjacentHTML('beforeend', `<li><embed src=${reader.result}></i><span>${v.name}</span></li>`);
break;
case 'image/jpeg':
case 'image/tiff':
case 'image/gif':
case 'image/png':
preview.insertAdjacentHTML('beforeend', `<li><img src="${reader.result}"></i><span>${v.name}</span></li>`);
break;
default:
preview.insertAdjacentHTML('beforeend', `<li><i class="fas fa-question-circle fa-fw"></i><span>${v.name}</span></li>`);
break;
}
}, false);
if (v) reader.readAsDataURL(v);
});
let previews = document.querySelectorAll('.fb-preview li');
if (previews.length > 10) previews.forEach(e => e.style.height = '50%');
if (previews.length > 20) previews.forEach(e => e.style.height = '30%');
if (previews.length > 30) previews.forEach(e => e.style.height = '10%');Stack Overflow用户
回答已采纳
发布于 2020-09-17 05:02:21
您的代码显示DOM突变发生在事件侦听器中，这是异步的。forEach循环只注册监听器，它在读取每个文件时不会阻塞。
有一种更好、更简单的方法来实现您的目的: Blob。您有一个FileReader，那么假设您一开始就有文件？File是Blob的子类，所以您可以对它们使用URL.createObjectURL。这同时为您提供了一个相对较短的"blob:“URL，它引用(但不表示)文件的内容。使用它作为您的图像和嵌入的来源。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63927797
复制相关文章
相似问题
腾讯云开发者
