<!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后端
https://www.cnblogs.com/dongxixi/p/11062232.html