JS

script Preview Images

<img id="uploadPreview" width="50%" /><br><br> <input id="uploadImage" type="file" name="myPhoto" onchange="PreviewImage();" /> <script type="text/javascript"> function PreviewImage() { var oFReader = new FileReader(); oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]); oFReader.onload = function (oFREvent) { document.getElementById("uploadPreview").src = oFREvent.target.result; }; }; </script>

---

ตัวอย่าง

---

#preview img { max-height: 100px; } <div id="preview"></div> <input id="files" type="file" accept="image/*" multiple> <script> const preview = (file) => { const fr = new FileReader(); fr.onload = () => { const img = document.createElement("img"); img.src = fr.result; // String Base64 img.alt = file.name; document.querySelector('#preview').append(img); }; fr.readAsDataURL(file); }; document.querySelector("#files").addEventListener("change", (ev) => { if (!ev.target.files) return; // Do nothing. [...ev.target.files].forEach(preview); }); </script>
ตัวอย่าง Multi Preview