<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图片上传展示</title>
  </head>
  <body>
    <input type="file" id="file" value="" oninput="change(this)" />
    <img src="" alt="" height="200" />
    <script>
      var input = document.querySelector("#file");
      var img = document.querySelector("img");
 
      function change(_this) {
        var file = input.files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function () {
          img.setAttribute("src", this.result);
        };
      }
    </script>
  </body>
</html>
 

FileReader   介绍  https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。

重要提示： FileReader仅用于以安全的方式从用户（远程）系统读取文件内容 它不能用于从文件系统中按路径名简单地读取文件。 要在JavaScript中按路径名读取文件，应使用标准Ajax解决方案进行服务器端文件读取，如果读取跨域，则使用CORS权限。

JavaScript - input 上传图片 并展示 （食用简单）的更多相关文章

  1. javascript实现上传图片并展示

    我们也都知道上传图片的样子是这样的(选择前)是这样的(选择后). 先在HTML设置图片上传 <form action="" method=""> & ...

  2. JavaScript怎么上传图片

    JavaScript怎么上传图片 在XMLHttpRequest Level2出台之前,大多数的异步上传图片都是利用iframe去实现的. 至于具体的实现细节,我就不在这边啰嗦的,Google一下就有 ...

  3. 自定义input上传图片组件

    自定义input上传图片组件,美化样式 前段时间因为项目需求,做过一个上传图片组件,这里分享下大致思路,希望对有需要的童鞋有所帮助~~~ 功能需求:1.上传图片限制大小.分辨率.类型 2.上传图片支持 ...

  4. Javascript 验证上传图片大小[客户端验证]

    需求分析: 在做上传图片的时候,如果不限制上传图片大小,后果非常的严重.那么我们怎样才可以解决一个棘手的问题呢?有两种方式: 1)后台处理: 也就是AJAX POST提交到后台,把图片上传到服务器上, ...

  5. javascript获取上传图片的大小

    javascript获取上传图片的大小 <pre><input id="file" type="file"> <input id= ...

  6. Javascript的堆和栈的简单理解

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. 在JavaScript中闭包的作用和简单的用法

    在JavaScript中闭包的作用和简单的用法 一.闭包的简介 作用域链:在js中只有函数有作用域的概念,由于函数内能访问函数外部的数据,而函数外部不能访问函数内部的数据,由上述形成一种作用域访问的链 ...

  8. javascript图片放大镜效果展示

    javascript图片放大镜效果展示 <!DOCTYPE html> <html> <head lang="en"> <meta cha ...

  9. javascript input只输入数字和字母

    <input type="text" placeholder="请输入您的用户名..."> <script type="text/j ...

  10. Javascript中DOM技术的的简单学习

    第十四课DOM技术概述1:DOM概述 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节 ...

随机推荐

  1. 2023-05-28：为什么Redis单线程模型效率也能那么高？

    2023-05-28:为什么Redis单线程模型效率也能那么高? 答案2023-05-28: 1.C语言实现,效率高 C语言程序运行速度快,因为其相较于其他高级语言更加接近底层机器.由于C语言直接操作 ...

  2. 2021-01-14：timsort是什么，如何用代码实现？

    福哥答案2021-01-14: 答案来自此链接: 介绍: timsort是一种混合.稳定高效的排序算法,源自合并排序和插入排序,旨在很好地处理多种真实数据.它由Tim Peters于2002年实施使用 ...

  3. flink 笔记

    flink 分区实现 http://smartsi.club/physical-partitioning-in-apache-flink.html

  4. PostgreSQL常用运维SQL

    一.数据库连接 1.获取数据库实例连接数 select count(*) from pg_stat_activity; 2.获取数据库最大连接数 show max_connections 3.查询当前 ...

  5. Nginx unexpected end of file 配置证书遇到问题，如何解决？

    原文链接 https://bysocket.com/nginx-unexpected-end-of-file-expecting-in-key-file/ 一.Nginx unexpected end ...

  6. 云小课 | 玩转HiLens Studio之快速订购HiLens Studio版本

    摘要:华为HiLens是端云协同多模态AI开发应用平台,提供给开发者的多语言类集成开发环境HiLens Studio,开发者可以在HiLens Studio 中编写和调试技能代码. 本文分享自华为云社 ...

  7. linux添加用户，修改用户密码，修改用户权限，设置root用户操作

    1.添加普通用户 [root@server ~]# useradd chenjiafa   //添加一个名为chenjiafa的用户[root@server ~]# passwd chenjiafa  ...

  8. 在DataGrid中实现Button Command绑定

    在DataGrid中实现Button Command绑定 Command="{Binding editCommand}" 会默认查找UserList中对象的属性,而你的UserLi ...

  9. mysql--read only

    问题背景: 1.在进行数据迁移和从库只读状态设置时,都会涉及到只读状态和Master-Slave主从关系设置 2.数据库参数文件默认是只读,重启数据库服务时 解决方法: 1.在my.cnf配置文件中添 ...

  10. 【邀请有礼】全球视频云创新挑战赛邀请有礼：参与 100% 获得 “壕” 礼，更有机会获得 JBL 音箱、Cherry 机械键盘

    活动背景: 2021 年首届全球视频云创新挑战赛报名火热进行中,这里奖金池高达四十万,有业界顶尖专家指导,有展示自我技能的广阔舞台,还有入职阿里的绿色招聘通道.如果你有一点点心动,那请不要错过这场挑战 ...