<!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. WeLM微信自研NLP大规模语言模型

    2022年9月份微信AI推出自研NLP大规模语言模型WeLM ,该模型是一个尺寸合理的中文模型,能够在零样本以及少样本的情境下完成包多语言任务在内的多种NLP任务.openai的chatgpt是在20 ...

  2. 【JMM内存模型-4】JMM内存模型之CPU缓存策略-jmmcpu4

    title: [JMM内存模型-4]JMM内存模型之CPU缓存策略 date: 2021-11-17 13:27:48.139 updated: 2021-12-26 17:43:10.442 url ...

  3. Linux 485驱动通信异常

    背景 前段时间接到一个项目,要求用主控用485和MCU通信.将代码调试好之后,验证没问题就发给测试了.测试测的也没问题. 但是,到设备量产时,发现有几台设备功能异常.将设备拿回来排查,发现是485通信 ...

  4. Python——第一章：循环语句while

    循环语句可以让我们的代码重复的去执行 while循环: while 条件:        代码 过程: 判断while循环的条件是否为真, 如果真, 执行代码. 然后再次判断条件.....直到条件为假 ...

  5. DVWA Cross Site Scripting (XSS) 跨站脚本攻击

    文章目录 DVWA_XSS(Stored) 存储性XSS 1.Low 2.Medium 3.High 4.Impossible XSS平台 DVWA_XSS(Stored) 存储性XSS 一句话概括: ...

  6. 劫持 PE 文件：新建节表并插入指定 DLL 文件

    PE格式简介 PE(Portable Executable)格式,是微软Win32环境可移植可执行文件(如exe.dll.vxd.sys和vdm等)的标准文件格式.PE格式衍生于早期建立在VAX(R) ...

  7. Spring Boot与Shiro和Mybatis整合

    1:shiro是什么? Apache Shiro 是ASF旗下的一款开源软件 shrio是一款强大而灵活的安全框架 可为任何应用提供安全保障- 从命令行应用.移动应用到大型网络及企业应用 2:shir ...

  8. Spring Batch 的基本使用

    简介 A lightweight, comprehensive batch framework designed to enable the development of robust batch a ...

  9. 用AI在本地给.NET设计几张壁纸

    AI是当今和未来非常重要的技术领域之一,它在各个行业都有广泛的应用,如医疗保健.金融.教育.制造业等.学习AI可以让你了解和掌握未来技术发展的核心,并为未来的职业发展做好准备.现在有很多开源的Mode ...

  10. 【独立闯天下】Prim新传奇！💥原团队的Blazor版本迟迟无音，合并请求石沉大海。于是，我们决定单干！加入Prime Blazor版项目，一起开创崭新的旅程吧！🌟📚

    共建Prime的Blazor版:为开源社区注入新活力 Prime组件库作为一款广受欢迎的开源组件库,一直以来都备受开发者们的青睐.然而,随着技术的不断发展和更新,原团队的Blazor版本似乎已经逐渐失 ...