이 글의 예시는 참고용으로 js 로컬 이미지 미리보기의 특정 코드를 공유합니다.
<!DOCTYPE html> <!-- <!DOCTYPE html>一定要放在第一行,除非上面都是空行 在HTML规范中,单独存在的标签是不需要使用/来自我关闭的,比如<br>,<input>,<hr>等等这样的标签都是符合语法的. 在XHTML规范中,单独存在的标签要按照XML的语法规则进行自我关闭,上面三个标签就应写成<br />,<input />,<hr /> --> <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" alt="JavaScript를 기반으로 로컬 이미지 미리보기 구현" > <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>
fileReader.readAsDataURL
URL .createObjectURL
URL이 실제로 "blob:"으로 시작하고 그 뒤에 32비트 UUID(8-4-4-4-12) 구조가 오는 것을 볼 수 있습니다.
이상 내용이 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되길 바라며, 또한 PHP 중국어 홈페이지를 응원해주시기 바랍니다.
자바스크립트 기반 로컬 이미지 미리보기 관련 더 많은 글은 PHP 중국어 홈페이지를 주목해주세요!