文件input框选择图片实时显示小技巧
Posted dongxixi
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了文件input框选择图片实时显示小技巧相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <body> <label for="id_myfile">头像 <img src="" alt="" width="80" style="margin-left: 20px" id="id_img"> </label> <input type="file" name="myfile" id="id_myfile"> #如果嫌弃这个文件框可以设置属性：display:none# <script> $(‘#id_myfile‘).change(function () // 先获取用户上传的文件对象 let fileObj = this.files[0]; // 生成一个文件读取的内置对象 let fileReader = new FileReader(); // 将文件对象传递给内置对象 fileReader.readAsDataURL(fileObj); //这是一个异步执行的过程，所以需要onload回调函数执行读取数据后的操作 // 将读取出文件对象替换到img标签 fileReader.onload = function() // 等待文件阅读器读取完毕再渲染图片 $(‘#id_img‘).attr(‘src‘,fileReader.result) ); </script> </body> </html>
下一篇：ajax将文件发往Django后端
以上是关于文件input框选择图片实时显示小技巧的主要内容，如果未能解决你的问题，请参考以下文章