带有信息数据预览的多张图像上传
使用 HTML5和File API
图片来源将是代表Blob对象的URL
<img src="blob:null/026cceb9-edr4-4281-babb-b56cbf759a3d">
const EL_browse = document.getElementById('browse');const EL_preview = document.getElementById('preview');const readImage = file => { if ( !(/^image/(png|jpe?g|gif)$/).test(file.type) ) return EL_preview.insertAdjacentHTML('beforeend', `Unsupported format ${file.type}: ${file.name}<br>`); const img = new Image(); img.addEventListener('load', () => { EL_preview.appendChild(img); EL_preview.insertAdjacentHTML('beforeend', `<div>${file.name} ${img.width}×${img.height} ${file.type} ${Math.round(file.size/1024)}KB<div>`); window.URL.revokeObjectURL(img.src); // Free some memory }); img.src = window.URL.createObjectURL(file);}EL_browse.addEventListener('change', ev => { EL_preview.innerHTML = ''; // Remove old images and data const files = ev.target.files; if (!files || !files[0]) return alert('File upload not supported'); [...files].forEach( readImage );});#preview img { max-height: 100px; }<input id="browse" type="file" multiple><div id="preview"></div>使用FileReader API的
如果您需要图像源作为长base64编码的数据字符串
<img >
const EL_browse = document.getElementById('browse');const EL_preview = document.getElementById('preview');const readImage = file => { if ( !(/^image/(png|jpe?g|gif)$/).test(file.type) ) return EL_preview.insertAdjacentHTML('beforeend', `<div>Unsupported format ${file.type}: ${file.name}</div>`); const reader = new FileReader(); reader.addEventListener('load', () => { const img = new Image(); img.addEventListener('load', () => { EL_preview.appendChild(img); EL_preview.insertAdjacentHTML('beforeend', `<div>${file.name} ${img.width}×${img.height} ${file.type} ${Math.round(file.size/1024)}KB</div>`); }); img.src = reader.result; }); reader.readAsDataURL(file);};EL_browse.addEventListener('change', ev => { EL_preview.innerHTML = ''; // Clear Preview const files = ev.target.files; if (!files || !files[0]) return alert('File upload not supported'); [...files].forEach( readImage );});#preview img { max-height: 100px; }<input id="browse" type="file" multiple><div id="preview"></div>
