代码示例:
# HTML部分 <form action=""> <div class="form-group"> <label for="id_file"> 用户头像 {% load static %} <img src="{% static 'img/default.png' %}" alt="" title="" width="40" id="id_img"> </label> <input type="file" id="id_file" name="file" style="display: none"> </div> </form> # JS部分 $('#id_file').change(function () { // 1. new一个文件阅读器对象 let fileReaderObj = new FileReader(); // 2. 获取用户上传的头像文件 let fileObj = $('#id_file')[0].files[0]; // 3. 将文件对象交给阅读器对象读取 (注意: readAsDataURL是一个异步操作) fileReaderObj.readAsDataURL(fileObj); // 4. 利用文件阅读器将文件展示到前端页面. (本质就是修改img的src属性) fileReaderObj.onload = function () { $('#id_img').attr('src', fileReaderObj.result); }; })
标签:文件,前端,阅读器,fileReaderObj,id,页面 From: https://www.cnblogs.com/wellplayed/p/17825043.html