<!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. 冲刺秋招之牛客刷Java记录第二天

    第一题 下列代码输入什么? public class Test { public static Test t1 = new Test(); { System.out.println("blo ...

  2. 性能集成监控系统exporter+Prometheus+Grafana

    Prometheus 是一个时序数据库,存数据 exporter是收集器,来收集被监控的数据,想要监控不同的内容,就使用不同的exporter,这个exporter应该放在被测服务器上,再把expor ...

  3. pacman下载时经常出现Operation too slow. Less than 1 bytes/sec transferred the last 10 seconds

    问题 我在manjaro系统上使用pacman下载软件的时候,经常出现以下报错: 错误:无法从 mirrors.tuna.tsinghua.edu.cn : Operation too slow. L ...

  4. f-VAEGAN-D2：VAE+GAN处理零样本学习问题

    虽然f-VAEGAN-D2在题目中说"适用任意样本",但对比的Few-shot相关的实验较少,这里仅讨论零样本学习的情况. 1. 背景介绍 由于为每个对象收集足够数量的高质量带标签 ...

  5. CodeForces 808G Anthem of Berland 前缀函数 KMP DP

    原题链接 题意 第一行给我们一串长为s,只包含小写字母与问号的字符串A,第二行给我们一个长为t只有小写字母的字符串B, 同时满足 $ s * t \le 1e7 $ 我们可以把问号变成任意的字母,我们 ...

  6. GDAL从二进制数据流中构造数据集

    目录 1. 概述 2. 实现 1. 概述 参看<从二进制数据流中构造GDAL可以读取的图像数据>这篇文章.这个问题的内涵在于,处理图像时都会将其读取成宽X高X波段的三维数组的内存Buffe ...

  7. CNCF首个云原生多云容器编排项目Karmada正式晋级孵化

    文分享自华为云社区<CNCF首个云原生多云容器编排项目Karmada正式晋级孵化]>,作者:云容器大未来. 近日,云原生计算基金会(CNCF)宣布,CNCF技术监督委员会(TOC)已投票通 ...

  8. 15年了，我们到底怎样才能用好 Serverless？

    摘要:Serverless能够给企业客户和开发者带来非常直观的收益,包括成本节约和效率提升. 作者:冯嘉 一.Serverless发展历程及现状 1.1．Serverless概念 通常意义上来讲,Se ...

  9. vue3溢出文本tooltip或title展示解决方案—如何获取文本宽度

    vue3溢出文本tooltip或title展示解决方案-如何获取文本宽度 Author:zhoulujun Date:2023-03-06 Hits:5 解决文本溢出,鼠标悬浮展示tooltips,要 ...

  10. expect --批量传递公钥

    #!/binbash ! rpm -qa |grep expect &> /dev/null && yum -y install expect #判断是否已下载expec ...