文件阅读器的使用——利用文件阅读器将选中的文件图片展示到前端页面-526互联

代码示例：

# 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);
    };
})

文件

阅读器