<!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. 数字孪生与GIS的结合：创新灾害预防管理的未来

    近年来,全球频发的自然灾害给人们的生命和财产安全带来了巨大威胁,灾害预防管理成为当务之急.然而,随着数字孪生技术和GIS的迅猛发展,一种全新的解决方案正在崭露头角.数字孪生与GIS的结合,为灾害预防管 ...

  2. 创建一个双模式跨运行时的 JavaScript 包

    本文将指导你发布双模式.跨运行时的 JavaScript 包.了解如何创建与 ESM 和 CommonJS 以及 Node.js.Deno 和浏览器等不同运行时兼容的库. 随着 JavaScript ...

  3. 超轻量级MP4封装方法介绍

    liwen01 2023.12.17 前言 MP4是目前非常常用的一种视频封装格式,关于MP4的介绍资料也非常多.我们常用的封装库或工具有:ffmpeg,libmp4v2,GPAC,MP4.js,它们 ...

  4. 2023年最后一个工作日，当 hr总监找上我协商赔偿

    今天是2023年最后一个工作日,hr 总监找上我协商赔偿一事,忆往昔三年前,公司刚融资1个亿,意气风发,博主入职即为公司巅峰,高级开发岗,14薪,各种福利,加班另算加班费,业务主要服务于众多500强集 ...

  5. 有意思，我的GitHub账号值$23806.2，快来试试你的？

    睡不着,看到一个有意思的网站:Estimate Github Worth Generator. 它可以用来估算 GitHub 账号的价值.马上试了一下. 我的账号估值:$23806.2 操作很简单,点 ...

  6. STM32CubeMX教程2 GPIO输出 - 点亮LED灯

    1.准备材料 开发板(STM32F407G-DISC1) ST-LINK/V2驱动 STM32CubeMX软件(Version 6.10.0) keil µVision5 IDE(MDK-Arm) 2 ...

  7. SQL Server系列：系统函数之字符串函数

    1.ascii()  :返回ascii码 --返回ascii码 select ascii('a') go 2.char() :返回ascii对应的字符 --返回ascii对应的字符 select ch ...

  8. MySQL数据库技术与应用：数据查询

    摘要:数据查询是数据库系统应用的主要内容,也是用户对数据库最频繁.最常见的基本操作请求. 数据查询 数据查询是数据库系统应用的主要内容,也是用户对数据库最频繁.最常见的基本操作请求.数据查询可以根据用 ...

  9. “绝影”机器狗如何利用ModelArts强化学习算法更改导航轨迹

    摘要:利用ModelArts平台云端协同进行强化学习AI能力部署,导航机器狗绕开火焰关闭可燃气体开关灭火. 在刚刚结束的HC Keynote中,为大家演示了基于华为ModelArts和Atlas 20 ...

  10. 论文复现丨基于ModelArts实现Text2SQL

    摘要:该论文提出了一种基于预训练 BERT 的新神经网络架构,称为 M-SQL.基于列的值提取分为值提取和值列匹配两个模块. 本文分享自华为云社区<基于ModelArts实现Text2SQL&g ...