<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<input type="file" id="file"  multiple="multiple" onchange="read()">

<div id="imgDiv"></div>

</body>

<script>

    //可以选择多个文件加载在页面

   function read(){

        var file = document.getElementById("file");

        var imgDiv = document.getElementById("imgDiv");

        for(var i=0;i<file.files.length;i++){

            let reader = new FileReader();

            var file1 = file.files[i];

            reader.readAsDataURL (file1);

            reader.onload = function (result) {

                //reader对象的result属性存储流读取的数据

                imgDiv.innerHTML += '<img src="' + reader.result + '" alt=""/>'

                console.log(reader.result) // 打印出转换后的base64

            }

        }

    }

</script>

</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. 【XSY2779】最小表示串 KMP DP polya定理

    题目描述 给你一个字符串\(s\),问你有多少个串是最小表示串且字典序\(\leq s\) \(|s|\leq 1000\) 题解 先把\(s\)变成比\(s\)小的最大的最小表示串.方法是从后枚举每 ...

  2. Ajax传递List对象到前台展示问题遇到的坑

    后台Json转换 后台传递的List对象,如果对象是实体类,实体类和另一个表关联,就可能会出现以下错误 org.hibernate.LazyInitializationException: faile ...

  3. Collect devices information

    Collect devices information root@vpx-test# kenv > kenv.txt root@vpx-test# sysctl -a > sysctl_a ...

  4. PHP no input file specified 三种解决方法

    一.IIS Noinput file specified   (IIS上报的错误) 方法一:改PHP.ini中的doc_root行,打开ini文件注释掉此行,然后重启IIS 方法二: 请修改php.i ...

  5. HNOI2019总结

    HNOI2019总结 Day 1 开场看三道题,T1是个计算几何,T2是个操作树加\(border\),T3题意有点复杂.想T1想了半个多小时,发现那个钝角不是很会处理,但是40分暴力应该还是可以写, ...

  6. hdu5017 Ellipsoid (模拟退火)

    Ellipsoid 原题链接 题目描述 给定.一个要满足的椭球的方程\(ax^2+by^2+cz^2+dyz+exz+fxy=1\) 求球面上一个点到原点\((0,0,0)\)的距离最小. 有多组输入 ...

  7. 15 Zabbix Item类型之Zabbix trapper类型

    点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 15 Zabbix Item类型之Zabbix trapper类型 zabbix获取数据时有时会出 ...

  8. 【Loj117】有源汇上下界最小流（网络流）

    [Loj117]有源汇上下界最小流(网络流) 题面 Loj 题解 还是模板题. #include<iostream> #include<cstdio> #include< ...

  9. edit 控件之隐藏光标

    @2019-02-22 [小记] 禁止聚焦功能便可实现

  10. CF983A Finite or not?（数学）

    题意:给出分母,分子和进制,要求判断该数是否为有限小数. Solution 表示并不知道怎么判断. 度娘:“一个分数在最简分数的情况下,如果它的分母只含有2和5两个质因数,这个分数就能化成有限小数.” ...