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); }
<h1>读取并且预览多张图片</h1> <input type="file" accept="image/png, image/jpeg" name="upload" multiple> <div id="preview"></div>
#preview { width: 90%; margin: 30px auto; } #preview img { width: 120px; margin: 10px; }