首页 > 其他分享 >文件阅读器的使用——利用文件阅读器将选中的文件图片展示到前端页面

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

时间:2023-11-10 21:14:50浏览次数:36  
标签:文件 前端 阅读器 fileReaderObj id 页面

代码示例:

# 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

相关文章

  • 如何从文件路径中提取目录路径?
    内容来自DOChttps://q.houxu6.top/?s=如何从文件路径中提取目录路径?在Bash中,如果VAR="/home/me/mydir/file.c",我该如何获得"/home/me/mydir"?dirname和basename是您要用于提取路径组件的工具:$VAR='/home/pax/file.c'$DIR="$(dirname"${VAR}")";FIL......
  • openGauss学习笔记-119 openGauss 数据库管理-设置数据库审计-设置文件权限安全策略
    openGauss学习笔记-119openGauss数据库管理-设置数据库审计-设置文件权限安全策略119.1背景信息数据库在安装过程中,会自动对其文件权限(包括运行过程中生成的文件,如日志文件等)进行设置。其权限规则如下:数据库程序目录的权限为0750。数据库数据文件目录的权限为0700。ope......
  • Linux搭建文件服务器
    @目录基于centos7.9搭建http文件服务器基于centos7.9搭建nginx文件服务器基于ubuntu2204搭建http文件服务器IP环境192.168.200.100VMware17基于centos7.9搭建http文件服务器安装httpd[root@localhost~]#yuminstall-yhttpd关闭防火墙以及selinux[root@loc......
  • exe可执行文件如何逆向?有那些逆向工具
    逆向工程是对已编译的可执行文件进行分析的过程,以理解其内部结构、功能和逻辑。逆向工程可执行文件通常用于安全研究、漏洞分析、软件破解等领域。下面是一些常用的逆向工具和技术,以及一般的逆向流程。逆向工具:IDAPro: IDAPro是一款强大的反汇编工具,用于分析和逆向各种可执......
  • [EFI]戴尔Latitude 5310电脑 Hackintosh 黑苹果efi引导文件
    硬件型号驱动情况主板戴尔Latitude5310处理器IntelCorei5-10210U(1.6GHz/L36M)已驱动内存8GB已驱动硬盘三星MZVLW1T0HMLH-000L2(1024GB/固态硬盘)已驱动显卡IntelUHD620已驱动声卡瑞昱AudioALC299@英特尔HighDefinitionAudio控制器已驱动网卡RTL8168HGigabitEt......
  • Windows 运行.sh文件
    背景今天运行opencv的一段代码,其中有一个模型需要下载,原作者写了一个.sh脚本,运行脚本自动下载模型,尝试使用pycharm终端运行报错解决办法下载Git,使用Gitbash运行.sh脚本文件。Gitbash可以认为是一个简化版的终端,在Git中,可以将windows系统当做Linux系统使用。除了可以运......
  • 高效技巧:Node.js文件写入
    文件写入是 Node.js 中的一项重要任务,它允许你将数据保存到本地文件系统中,供后续使用。这个功能在许多应用中都有广泛的应用,包括数据备份、日志记录、配置文件更新等。在本文,我们将介绍如何在Node.js中执行文件写入操作,提供基本概念、常用方法、使用场景和实践案例。基本概念在......
  • PHP大文件分片上传的实现方法
    一、前言在网站开发中,经常会有上传文件的需求,有的文件size太大直接上传,经常会导致上传过程中耗时太久,大量占用带宽资源,因此有了分片上传。分片上传主要是前端将一个较大的文件分成等分的几片,标识当前分片是第几片和总共几片,待所有的分片均上传成功的时候,在后台进行合成文件即可......
  • Mysql8.0 导出文件导入到 5.7
    1:创建的数据库要和导出文件编码一致,如下图 2:查看是否有其他编码如下图: 3:Invaliddefaultvaluefor'LOCK_TIME_' 报错更改mysql的my.ini 文件 设置explicit_defaults_for_timestamp=ON  重启mysqlC:\ProgramData\MySQL\MySQLServer5.7......
  • 纯前端操作文件?
    事情是这样的我发现vscode在线版居然可以打开文件目录和文件,还能保存文件。兼容性一般目前谷歌edgeOpera支持其他均不支持vscode.dev/查了一下MDN发现增加新的API了developer.mozilla.org/zh-CN/docs/…showDirectoryPicker这是一项实验性技术未来版本可能会发生变化作用......