使用相同的JavaScript函数更改多张图片上传的预览可以通过以下步骤实现:
<div class="image-container">
<input type="file" class="image-upload" multiple>
<div class="image-preview"></div>
</div>
<div class="image-container">
<input type="file" class="image-upload" multiple>
<div class="image-preview"></div>
</div>
<!-- 可以根据需要添加更多的图片上传容器 -->
// 获取所有图片上传容器
const imageContainers = document.querySelectorAll('.image-container');
// 遍历每个图片上传容器
imageContainers.forEach(container => {
// 获取文件选择器和预览元素
const fileInput = container.querySelector('.image-upload');
const preview = container.querySelector('.image-preview');
// 监听文件选择器的change事件
fileInput.addEventListener('change', () => {
// 清空预览元素
preview.innerHTML = '';
// 遍历选择的文件
Array.from(fileInput.files).forEach(file => {
// 创建一个新的图片元素
const img = document.createElement('img');
img.src = URL.createObjectURL(file);
img.alt = file.name;
// 将图片元素添加到预览元素中
preview.appendChild(img);
});
});
});
这样,每个图片上传容器都会有一个文件选择器和一个预览元素,选择图片后,预览元素会显示选择的图片。通过使用相同的JavaScript函数,可以轻松地处理多个图片上传容器的预览。
对于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体品牌商,建议参考腾讯云的官方文档或搜索相关资料获取更多信息。
领取专属 10元无门槛券
手把手带您无忧上云