<!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. 关于SpringBoot中出现的循环依赖问题

    环境: SpringBoot2.7.8 背景: 在增加出库订单时需要对物品表的的数量进行修改 因此我在OutboundController中创建了几个公共方法,并将其注入到Spring中,结果给我报了 ...

  2. MYSQL数据库root账户密码忘记，如何重置？

  3. 断言可Cookie管理器

    断言可以判断预期结果和实际结果是否一致 可以辅助判断脚本的运行结果是否正确 cookie管理器 记录用户的cookie信息 可以自动记录cookie,也可以使用用户自定义的cookie

  4. Text Intelligence - TextIn.com AI时代下的智能文档识别、处理、转换

    一.智能文档处理介绍 在AI时代,智能文档处理技术正变得越来越重要.它包括了智能文字识别(OCR).智能文档信息抽取.文档图像处理以及文档转换等多个方面.这些技术共同构成了现代信息处理的核心,广泛应用 ...

  5. LiteAI 四大杀手锏，解锁物联网智能设备AI开发难关

    [摘要] IoT设备中嵌入AI能力实现产品的智能升级,已经是AIoT行业发展的重要通道,那怎样才能实现AIoT = AI + IoT呢?如何将AI模型塞到小小的IoT设备里,让它可以轻松运行起来呢?成 ...

  6. 从缓存的本质说起，说服技术大佬用Redis

    摘要:在技术领域中,没有银弹.我们需要不断探索和研究新的技术,结合具体问题和需求,选择最适合的解决方案. 本文分享自华为云社区<知乎问题:如何说服技术老大用 Redis ?>,作者:勇哥j ...

  7. 6种方法帮你搞定SimpleDateFormat类不是线程安全的问题

    摘要:本文主要讲述在高并发下SimpleDateFormat类为何会出现安全问题,以及如何解决SimpleDateFormat类的安全问题. 本文分享自华为云社区<[高并发]SimpleDate ...

  8. 万字长文|Hadoop入门笔记（附资料）

    大数据迅速发展,但是Hadoop的基础地位一直没有改变.理解并掌握Hadoop相关知识对于之后的相关组件学习有着地基的作用.本文整理了Hadoop基础理论知识与常用组件介绍,虽然有一些组件已经不太常用 ...

  9. 重磅！Github宣布面向团队免费

    GitHub CEO Nat Friedman 宣布已面向全体 GitHub 用户和团队提供不限制协作人数的私有仓库,并宣称 GitHub 的全部核心功能现已对所有人免费提供. 公告称: 到目前为止, ...

  10. appuploader 入门使用

    回想一下我们发布 iOS 应用,不仅步骤繁琐,非常耗时.一旦其中一步失误了,又得重新来.作为一名优秀的工程师不应该让这些重复的工作在浪费我们的人生.在软件工程里面,我们一直都推崇把重复.流程化的工作交 ...