茉莉兰亭

1
<input type="file" id="myInput" multiple/>
2
<!-- 图片显示区域 -->
3
<div id="preview"></div>

1
.imageItem {
2
    width: 100px;
3
}

1
const myInput = document.querySelector('#myInput');
2
myInput.addEventListener('change', handleFiles, false);
3

4
function handleFiles() {
5
    const filesList = this.files;
6
    for (let item of filesList) {
7
        let imageType = /^image\//;
8
        if (!imageType.test(item.type)) {
9
            continue
10
        }
11
        ;
12

13
        const img = document.createElement('img');
14
        const preview = document.querySelector('#preview');
15
        img.classList.add('imageItem');
16

17
        // 原始方法：获取图片的二进制数据，存入新的img标签
18
        img.file = item;
19
        preview.appendChild(img);
20

21
        const reader = new FileReader();
22
        reader.onload = e => {
23
            img.src = e.target.result;
24
        }
25
        reader.readAsDataURL(item);
26

27
        // 快捷方法：使用对象URL
28
        img.src = URL.createObjectURL(item);
29
        img.onload = () => {
30
            URL.revokeObjectURL(this.src);
31
        }
32
        preview.appendChild(img);
33
    }
34
}