【JS 】图片预览多选

JS 图片预览多选

• 理解：获取files数组中的对象，通过 new FileReader()，onload 方法 获取 base64 图片 ，将图片追加到 class为‘preview’ 的div中。

HTML

 

<input type="file" class="upload" onchange="handleFiles(this.files)" multiple>
<div class="preview"></div>

JS

 

<script>
    let preview = document.querySelector('.preview');
    function handleFiles(files) {
        preview.innerHTML = ''
        for (let i = 0; i < files.length; i++) {
            const file = files[i];
            if (!file.type.startsWith('image/')) {
                continue
            }
            const img = document.createElement("img");
            img.classList.add("obj");
            img.file = file;
            preview.appendChild(
                img); // Assuming th