<!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. pytest+allure+jenkins+python+git，实现Linux服务器看测试报告，并发送邮件通知

    1.简介 pytest:一种单元测试框架,与python自带的unittest测试框架类似,但是比unittest框架使用起来更简洁,效率更高. allure:是开源测试报告框架. jenkins:持 ...

  2. vulnhub - Nagini - writeup

    信息收集 基础信息 目标只开放了22和88: root@Lockly tmp/nagini » arp-scan -I eth1 -l Interface: eth1, type: EN10MB, M ...

  3. java桌面小闹钟

    写了个桌面的小闹钟,在运行环境可以编译,但是打包成jar文件,想用批处理命令直接调用报错"找不到或无法加载主类". 需求 为防止整天久坐,编写一个桌面闹钟.该闹钟功能很简单,一个小 ...

  4. Spring Boot中设置定时发送邮件任务

    1:浅谈发送邮箱: 邮箱验证是一个很常见的功能了,基本上每个网站都会用的到, java也有专门的jar来处理邮件发送等服务 2:学过javaweb大家都对发送邮箱上不是很陌生了吧 但之前发送邮箱的步骤 ...

  5. webrtc实时视频语音实现

    webrtc介绍 WebRTC实现了基于网页的视频会议,标准是WHATWG 协议,目的是通过浏览器提供简单的javascript就可以达到实时通讯(Real-Time Communications ( ...

  6. 跟我读论文丨ACL2021 NER 模块化交互网络用于命名实体识别

    摘要:本文是对ACL2021 NER 模块化交互网络用于命名实体识别这一论文工作进行初步解读. 本文分享自华为云社区<ACL2021 NER | 模块化交互网络用于命名实体识别>,作者: ...

  7. 如何快速从 ETL 到 ELT？火山引擎 ByteHouse 做了这三件事

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 前言 当涉及到企业分析场景时,所使用的数据通常源自多样的业务数据,这些数据系统大多采用以行为主的存储结构,比如支付 ...

  8. 火山引擎 DataLeap：在数据研发中，如何提升效率？

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 在数仓及中台研发过程中,研发人员经常需要在不同任务中维护相同或类似代码,不仅费时费力,并且代码迭代后也面临不同业务 ...

  9. 十分钟读懂火山引擎 DataLeap 数据治理实践

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 日前,火山引擎数智平台 VeDI 直播活动「超话数据」在线举办,来自火山引擎 DataLeap 数据产品专家从数据 ...

  10. sqlite3.OperationalError: no such function: JSON_VALID

    Initializing database.. Traceback (most recent call last): File "d:\program files\python38\lib\ ...