1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <input type="file" id="file"  multiple="multiple" onchange="read()">
  9. <div id="imgDiv"></div>
  10. </body>
  11. <script>
  12.     //可以选择多个文件加载在页面
  13.    function read(){
  14.         var file = document.getElementById("file");
  15.         var imgDiv = document.getElementById("imgDiv");
  16.         for(var i=0;i<file.files.length;i++){
  17.             let reader = new FileReader();
  18.             var file1 = file.files[i];
  19.             reader.readAsDataURL (file1);
  20.             reader.onload = function (result) {
  21.                 //reader对象的result属性存储流读取的数据
  22.                 imgDiv.innerHTML += '<img src="' + reader.result + '" alt=""/>'
  23.                 console.log(reader.result) // 打印出转换后的base64
  24.             }
  25.         }
  26.     }
  27. </script>
  28. </html>

推荐博客：https://blog.csdn.net/yaoyuan_difang/article/details/38582697

H5新属性FileReader实现选择图片后立即显示在页面上的更多相关文章

  1. input file选择图片后 预览

    很多前端都选择用插件来实现图片预览,这个小功能也可以很简单的用jQuery来实现 简单的jQuery实现input file选择图片后,可以预览图片的效果 简单的HTML代码: <div> ...

  2. Input File选择图片后，未保存预览

    今天实现上传图片到服务器 简单的jQuery实现input file选择图片后,可以预览图片的效果 简单的HTML代码: <div> <img src="" cl ...

  3. LaunchScreen.storyboard 设置图片后不显示(转)

    LaunchScreen.storyboard 设置图片后不显示 将图片放在根目录下即可 3D85E99F-A79B-4419-817D-1417E1446624.png   转至:http://ww ...

  4. js实现FileUpload选择图片后预览功能

    当asp.net的FileUpload选择一个图片后不需要上传就能显示出图片的预览功能, 代码: <%@ Page Language="C#" AutoEventWireup ...

  5. html选择图片后预览，保存并上传

    html代码:------------------添加-------------------------- accept="image/gif,image/jpeg,image/jpg,im ...

  6. type="file" 选择图片后预览

    function setImagePreview(avalue) { var docObj = document.getElementById("doc"); var imgObj ...

  7. H5新属性 contenteditable

    contenteditable 属性规定元素内容是否可编辑 <div contenteditable style="width: 100px;height:100px"> ...

  8. h5新属性

    <!DOCTYPE html> <html lang="en"> <head> <meta id="viewport" ...

  9. html5plus 从相册选择图片后获取图片的大小

    plus.gallery.pick(function (filePath) { plus.io.resolveLocalFileSystemURL(filePath, function (entry) ...

随机推荐

  1. JAVA spring配置文件总结

    首先来看一个标准的Spring配置文件 applicationContext.xml <?xml version="1.0" encoding="UTF-8&quo ...

  2. Python内建GUI模块Tkinter(一)

    Python主窗口 Python特定的GUI界面,是一个图像的窗口,tkinter是python自带的,可以编辑的GUI界面,我们可以用GUI实现很多一个直观的功能,如何想开发一个计算器,如果只是一个 ...

  3. P1282 多米诺骨牌 dp

    思路:dp[i][j] 的j是上半段的和的值   这里表示的是达到上半段值是j的最小次数 答案在最小的可达到的j #include<bits/stdc++.h> using namespa ...

  4. 【XSY2744】信仰圣光 分治FFT 多项式exp 容斥原理

    题目描述 有一个\(n\)个元素的置换,你要选择\(k\)个元素,问有多少种方案满足:对于每个轮换,你都选择了其中的一个元素. 对\(998244353\)取模. \(k\leq n\leq 1525 ...

  5. Dynamic CRM 2015学习笔记（1）Azure 上安装 CRM 2015

    今天终于在Azure上安装成功了CRM 2015,下面简单介绍下安装过程,以及出现问题的解决: 一. 配置AD, 安装IIS 参考下面的link,里面有详细的配置步骤 http://www.c-sha ...

  6. bootstrap学习一

    bootstrap学习 一.css概览: 1.使用HTML5标准,<!DOCTYPE html>. 2.移动设备优先: <meta name="viewport" ...

  7. A1136. Delayed Palindrome

    Consider a positive integer N written in standard notation with k+1 digits a​i​​ as a​k​​⋯a​1​​a​0​​ ...

  8. A1113. Integer Set Partition

    Given a set of N (> 1) positive integers, you are supposed to partition them into two disjoint se ...

  9. JavaScript ES6 核心功能一览

    JavaScript 在过去几年里发生了很大的变化.这里介绍 12 个你马上就能用的新功能. JavaScript 历史 新的语言规范被称作 ECMAScript 6.也称为 ES6 或 ES2015 ...

  10. 4招搞定项目年终总结，还有9大PPT模板免费送

    作为一名合格的项目经理 一到年末,我们的头等大事就来了 那就是写项目年终总结和计划 但是………初入这行的项目经理有点犯难,因为 不 会 写   不用怕,小编送你年终总结秘籍和好看的PPT模板 先来看秘 ...