<!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. StringBuilder、StringBuffer

    StringBuilder 1.concat() 拼接字符串 2.indexOf() 查找 3.replace() 替换 4.subString(1,2) 截取 0,1,2 1开始 2结束 Strin ...

  2. #11独立开发周总结|核心OKR1000元/月已达标

    核心OKR:1000元/月达成情况 算上微信上收费了200多元,核心OKR已达标 12.25-12.29本周完成事项 产品方面 本周产品上主要是在进行重构的测试,顺利上线,线上问题也比较少 运营方面 ...

  3. C#新鲜面试题出炉(2024)

    总所周知  C#这门语言 没有Java的八股文,所以面试题一般都是问的业务, 那么对于新手来讲,最起码也要会一些基础性问题, 以下就是包含C# 和sqlserver几个常见的面试题   1) Dele ...

  4. Feign源码解析4：调用过程

    背景 前面几篇分析了Feign的初始化过程,历经艰难,可算是把@FeignClient注解的接口对应的代理对象给创建出来了.今天看下在实际Feign调用过程中的一些源码细节. 我们这里Feign接口如 ...

  5. flutter常用的音乐播放器库

    audioplayers: 优势:audioplayers 是一个简单易用的音乐播放器库,支持主流平台(Android.iOS)并提供了丰富的功能,比如播放.暂停.快进.音量控制等. 缺点:audio ...

  6. 1、reids 基础

    SortedSet类型 特性 1.可排序 2.元素不重复性 3.查询速度快 与普通的集合类型相比,SortedSet 主要有以下两个特点: 有序性:根据分数对元素进行排序,便于范围查找等操作. 不重复 ...

  7. 【华为云技术分享】LwM2M协议的学习与分享

    [摘要] 本文主要对于LwM2M协议进行了简单的介绍,包括协议的体系架构以及特性.对象.资源.接口的定义等,希望对你有所帮助. 1协议简介 LwM2M(Lightweight Machine-To-M ...

  8. 基于Atlas 200 DK的原版YOLOv3（基于Darknet-53）实现（Python版本）

    [摘要]本文将为大家带来使用Atlas 200 DK的原版YOLOv3(基于Darknet-53)实现的展示. 前言 YOLOv3可以算作是经典网络了,较好实现了速度和精度的Trade off,成为和 ...

  9. 如何只用一个小时定制一个行业AI 模型？

    摘要:华为云通过ModelArts Pro提供更多的行业套件和工作流可以供用户直接使用,进一步降低AI行业落地难度,让传统企业客户无需掌握算法知识亦可实现自身业务与AI技术的融合. 去年,在华为开发者 ...

  10. 打破“双十定律”，华为云AI推动超级抗菌药Drug X研发加速

    摘要:学科交叉已经逐渐变成了科技创新的一个主要源泉,成为这个科学时代一个不可替代的研究范式.在科技与技术合力赋能之下,中国科研人创新奋斗再出新成果,人类与病菌的博弈因此有了新武器. 本文分享自华为云社 ...