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

文件input框选择图片实时显示小技巧的更多相关文章

  1. input file选择图片后 预览

    很多前端都选择用插件来实现图片预览,这个小功能也可以很简单的用jQuery来实现 简单的jQuery实现input file选择图片后,可以预览图片的效果 简单的HTML代码: <div> ...

  2. Input File选择图片后，未保存预览

    今天实现上传图片到服务器 简单的jQuery实现input file选择图片后,可以预览图片的效果 简单的HTML代码: <div> <img src="" cl ...

  3. 前端获取文件input框的美化操作

    前面我们说了一种利用input框和js的当时获取本地文件内容的情况-详细信息参考 2017年11月8日前端用js获取本地文件的内容 以上方式获取的按钮是系统默认的显示,有时候我们需要对按钮的外观进行美 ...

  4. 设置type为file的input标签选择图片类型

    设置能选择各种类型的图片如:png,jpg <input id="file" name="file" type="file" acce ...

  5. jquery根据下拉框选择的值显示输入框

    原理就是根据下拉框选择的值来控制显示那个输入框: html代码: 首先定义一个下拉框,$serviceTypeList就是后台传过来的所有属性, <div class="uk-form ...

  6. js下拉框选择图片

    二种方式:下拉框里面选项有图片与没有图片 1.用下拉框写  下拉框的option没法添加图片如果下拉框里面不需要图片可以用这种方式. <!DOCTYPE html> <html> ...

  7. moodle3.7上传中文文件，无法引用,图片不显示

    初始安装moodle3.7 上传图片,名称为中文时,无法引用图片,图片不显示.这里采用修改moodle根目录下的config.php文件, 添加了变量$CFG->slasharguments = ...

  8. input框输入手机号码分隔显示

    在input框输入手机号码时,自动加入空格按照3,4,4位显示,如: 实现方法如下: <label>手机号码</label><input type="text& ...

  9. Android简易实战教程--第二十二话《自定义组合控件模拟qq登录下拉框和其中的一些”小技巧”》

    转载此文章请注明出处:点击打开链接   http://blog.csdn.net/qq_32059827/article/details/52313516 首先,很荣幸此专栏能被CSDN推荐到主页.荣 ...

随机推荐

  1. P2680 运输计划 二分+树上差分

    又咕咕了几天\(QwQ\) 思路:二分+树上差分 提交:\(\geq5\)次 错因:\(lca\)写错+卡了很久常数(哪位大佬帮我康康,有更好的写法请指出\(QwQ\)) 题解: 我们先将原问题转化为 ...

  2. 配置文件的属性ENC加密

    转载:https://www.cnblogs.com/zqyx/p/9687136.html 在micro service体系中,有了config server,我们可以把配置存放在git.svn.数 ...

  3. vue-ckeditor-word粘贴

    我司需要做一个需求,就是使用富文本编辑器时,不要以上传附件的形式上传图片,而是以复制粘贴的形式上传图片. 在网上找了一下,有一个插件支持这个功能. WordPaster 安装方式如下: 直接使用Wor ...

  4. Linux下查看文件和文件夹大小 df,du命令

    转自 http://www.cnblogs.com/benio/archive/2010/10/13/1849946.html df可以查看一级文件夹大小.使用比例.档案系统及其挂入点,但对文件却无能 ...

  5. NSString的导出

    字符串的导出,写到某个文件中去 void stringExport(){ NSString *str=@"123456"; //if file not exist will not ...

  6. 二十、网络ifconfig 、ip 、netstat、ss之二

    ip 网络层协议 ip地址 点分十进制分为4段,范围 0-255 ip分类 A 占据1段,最左侧一段第一位固定为0 0 000 0000 - 0 111 1111  0 - 127:其中0为网络,12 ...

  7. manjaro 18.10 install soft

    1.添加新账户 useradd username新建账户; useradd -d /home/xxx -m xxx创建用户,并同时生成用户目录,不然账户无法正常启用; passwd username修 ...

  8. GitHub排名TOP30的机器学习开源项目/贪心学院

    对于机器学习者来说,阅读开源代码并基于代码构建自己的项目,是一个非常有效的学习方法.看看以下这些Github上平均star为3558的开源项目,你错了哪些? 1. FastText:快速文本表示和文本 ...

  9. 使用 Linux Mint 作为主要操作系统的一些个人常用软件

    本篇文章讲一下一些 Linux 上的应用,多数为日常生活娱乐用的软件,同时也会讲一点开发工具,对于有兴趣继续研究 Linux 的可以参考一下. 目录 软件的安装方式 1.Software Manage ...

  10. kvm安装及简单使用

    1 cat /etc/redhat-release      CentOS release 6.4 (Final)2 egrep ‘vmx|svm’ /proc/cpuinfo3 yum -y ins ...