踏遍青山
Log in
Main
Web前端
FileReader 文件上传 前 图片预览
root
abc abc
19 Oct
<!DOCTYPE html>
<html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文件上传表单</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script> $('#id_myfile').change(function () { // 先获取用户上传的文件对象 let fileObj = this.files[0]; // 生成一个内置对象 let fileReader = new FileReader(); // 将文件对象传递给内置对象 fileReader.readAsDataURL(fileObj); // 将读取出文件对象替换到img标签 fileReader.onload = function(){ // 等待文件阅读器读取完毕再渲染图片 $('#id_img').attr('src',fileReader.result) } }); </script> <style> body { font-family: Arial, sans-serif; max-width: 500px; margin: 0 auto; padding: 20px; } .upload-form { border: 2px dashed #ccc; padding: 20px; text-align: center; border-radius: 5px; } .upload-btn { background-color: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; margin-top: 10px; } .upload-btn:hover { background-color: #45a049; } </style> </head> <body> <h2>文件上传</h2> <img src="test.jpg" id="id_img"/> <form class="upload-form" action="/upload" method="post" enctype="multipart/form-data"> <p>请选择要上传的文件：</p> <input type="file" name="fileToUpload" id="id_myfile'" required> <br> <input class="upload-btn" type="submit" value="上传文件" name="submit"> </form> </body> </html>
<!DOCTYPE html>
<html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文件上传表单</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script> $('#id_myfile').change(function () { // 先获取用户上传的文件对象 let fileObj = this.files[0]; // 生成一个内置对象 let fileReader = new FileReader(); // 将文件对象传递给内置对象 fileReader.readAsDataURL(fileObj); // 将读取出文件对象替换到img标签 fileReader.onload = function(){ // 等待文件阅读器读取完毕再渲染图片 $('#id_img').attr('src',fileReader.result) } }); </script> <style> body { font-family: Arial, sans-serif; max-width: 500px; margin: 0 auto; padding: 20px; } .upload-form { border: 2px dashed #ccc; padding: 20px; text-align: center; border-radius: 5px; } .upload-btn { background-color: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; margin-top: 10px; } .upload-btn:hover { background-color: #45a049; } </style> </head> <body> <h2>文件上传</h2> <img src="test.jpg" id="id_img"/> <form class="upload-form" action="/upload" method="post" enctype="multipart/form-data"> <p>请选择要上传的文件：</p> <input type="file" name="fileToUpload" id="id_myfile'" required> <br> <input class="upload-btn" type="submit" value="上传文件" name="submit"> </form> </body> </html>