JSFiddle - React, Tailwind, and code Playground

by vace

HTML

<h1>读取并且预览多张图片</h1>
    <input type="file" accept="image/png, image/jpeg" name="upload" multiple>
<div id="preview"></div>

CSS

#preview {
        width: 90%;
        margin: 30px auto;
    }
    
    #preview img {
        width: 120px;
        margin: 10px;
    }

JavaScript

var fileEle = document.querySelector('input[name=upload]');
fileEle.addEventListener('change', function(e) {
    //files 为 FileList对象
    var files = e.target.files;
    if (!files.length) return alert('没有选择任何文件');

    for (var i = 0, _len = files.length; i < _len; i++) {
        readImage(files.item(i), previewImage); // 等同于 files[i]
    }

});


function readImage(file, callback) {
    var reader = new FileReader();
    //监听读取完毕事件
    reader.onload = function(e) {
        callback(reader.result);
    };

    reader.readAsDataURL(file);
}

function previewImage(readerResult) {
    var image = new Image();
    image.src = readerResult;
    document.getElementById('preview').appendChild(image);
}