JavaScript 本地圖片預覽

2024-04-27 15:15:01

字體：大中小

來源：轉載

供稿：網友

<!DOCTYPE html><html> <head> <meta charset="utf8"> <style> input[type=radio] { /* 按鈕與文字對齊 */ vertical-align:middle; } input[type=file] { display: block; } #img { width: 200px; height: 200px; border: 1px solid black; margin-top: 10px; } </style> </head> <body> <input type="radio" name="ipt> var previewTypes = document.getElementsByName("previewType"); var imgFile = document.getElementById("imgFile"); var img = document.getElementById("img"); function getPreviewType() { for(var i=0; i<previewTypes.length; i++) { if(previewTypes[i].checked) { return previewTypes[i].value; } } } function onPreviewTypeChange() { imgChange(event.target.value); } function imgChange(type) { img.src = ""; var files = imgFile.files; console.log(files); if(!files || files.length === 0) { return; } var file = files[0]; if(!type) { type = getPreviewType(); if(!type) { return; } } switch(type) { case "fileReader": var fr = new FileReader(); fr.onload = function(progressEvent) { console.log(progressEvent); img.src = progressEvent.target.result; } fr.readAsDataURL(file); break; case "createURL": img.onload = function() { //釋放一個之前通過調用 URL.createObjectURL() 創建的已經存在的 URL 對象。 URL.revokeObjectURL(img.src); } img.src = URL.createObjectURL(file); break; } } </script> </body></html>