<!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后端