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="PReviewType" value="fileReader" onChange="onPreviewTypeChange()">fileReader <input type="radio" name="previewType" value="createURL" onChange="onPreviewTypeChange()">createURL <hr> <input type="file" id="imgFile" onChange="imgChange()" value="test.jpg"> <img id="img"> <script> 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>