踏遍青山
Log in
Main
Web前端
上传前图片预览功能
root
abc abc
13 Oct
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> function previewFile() { const preview = document.querySelector("img"); //const file = document.querySelector("input[type=file]").files[0]; const file = document.getElementById("file_id").files[0]; const reader = new FileReader(); reader.addEventListener("load",() => { // 将图像文件转换为 Base64 字符串 preview.src = reader.result;}, false, ); if (file) { reader.readAsDataURL(file); console.log(reader.result) } } </script> </head> <body> <input id="file_id" type="file" onchange="previewFile()" /><br /> <img src="" height="200" alt="图片预览" /> </body> </html>
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> function previewFile() { const preview = document.querySelector("img"); //const file = document.querySelector("input[type=file]").files[0]; const file = document.getElementById("file_id").files[0]; const reader = new FileReader(); reader.addEventListener("load",() => { // 将图像文件转换为 Base64 字符串 preview.src = reader.result;}, false, ); if (file) { reader.readAsDataURL(file); console.log(reader.result) } } </script> </head> <body> <input id="file_id" type="file" onchange="previewFile()" /><br /> <img src="" height="200" alt="图片预览" /> </body> </html>