<!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. flutter布局-1-column

    1.mainAxisAlignment:主轴布局方式,column主轴方向是垂直的方向   mainaxis.png 默认值:MainAxisAlignment.start: start ,沿着主轴方 ...

  2. 029_检测 MySQL 数据库连接数量

    #!/bin/bash#本脚本每 2 秒检测一次 MySQL 并发连接数,可以将本脚本设置为开机启动脚本,或在特定时间段执行#以满足对 MySQL 数据库的监控需求,查看 MySQL 连接是否正常#本 ...

  3. nodejs中http服务器，如何使用GET,POST请求发送数据、npm、以及一些插件的介绍

    浏览器给服务器传递参数,最常用的是地址栏传参(get),以及表单提交(post) 先说get传参,就是在url后跟上?key=value&key2=value2...... 但是按照前几篇的h ...

  4. Irrlicht引擎剖析一

    代码风格:  1.接口以I开头,实现以C开头,保存数据的结构体以S开头  2.函数名以小写字母开头,变量以大字母开头  3.接口的公共函数,其参数大部分给了默认值  4.采用名字空间    名字空间i ...

  5. JVM备忘点（1.8以前）

    1.内存结构 左边两个线程共享,右边三个线程私有. 方法区:.class文件的类信息.常量.static变量.即时编译器编译后的代码(动态代理).HotSpot将方法区称为永久代 堆:分为新生代和老年 ...

  6. 1625： 【例 1】反素数 Antiprime

    1625: [例 1]反素数 Antiprime [题目描述] 原题来自:POI 2001 如果一个大于等于 1 的正整数 n,满足所有小于 n 且大于等于 1 的所有正整数的约数个数都小于 n 的约 ...

  7. js和jQuery实现的Ajax

    1. JS实现Ajax <!doctype html> <html lang="en"> <head> <meta charset=&qu ...

  8. cas系列-cas server demo搭建(二)

    一 部署简述 cas server官方推荐采用overlay方式进行部署,通过替换自定义文件,减少项目文件改动,以简化开发和部署,这个有点类似于项目上直接替换java的class文件,由于和git的搭 ...

  9. CF1217C

    CF1217C 题意: 给定一个01串,一个good01串的定义是这个01串所代表的二进制数字刚好等于它的长度,允许前导零,问这个01串当中有几个good子串 解法: 枚举每一段连续的 $ 0 $ , ...

  10. VUE项目开发流程

    前期准备 安装npm 安装webpack\vue-cli(2.9.6版本--版本不同可能会导致以下一些目录结构以及错误解决办法不符合实际情况) 创建项目 初始化创建项目,项目名称.项目描述.拥有者等等 ...