<!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. Django+Xadmin打造在线教育系统(九)

    xadmin的进阶开发 因版本问题.有些配置可能无效 自定义icon xadmin的图标采用的是第三方css样式font awesome,我们可以进官网下载最新的样式替代原本的,下载地址:http:/ ...

  2. 洛谷P4281 紧急集合 / 聚会

    LCA 题目要求找离三个点最近的点,我们先看两个点的情况,自然是找LCA,那么三个点的时候是否与LCA有关呢? 显然,离三个点最近的点一定是在这三个点联通的简单路径上. 可以简单证明一下,假设某个点离 ...

  3. Appium-desktop安装启用Inspector一直报错An unknown server-side error occurred...

    遇到的问题是: 启用Appium-desktop的Inspector一直报错:An unknown server-side error occurred while processing the co ...

  4. 【BZOJ1015】【JSOI2008】星球大战 并查集

    题目大意 给你一张\(n\)个点\(m\)条边的无向图,有\(q\)次操作,每次删掉一个点以及和这个点相邻的边,求最开始和每次删完点后的连通块个数. \(q\leq n\leq 400000,m\le ...

  5. bzoj 1483: [HNOI2009]梦幻布丁 (链表启发式合并）

    Description N个布丁摆成一行,进行M次操作.每次将某个颜色的布丁全部变成另一种颜色的,然后再询问当前一共有多少段颜色. 例如颜色分别为1,2,2,1的四个布丁一共有3段颜色. Input ...

  6. virtualenv virtualenvwrapper 虚拟环境创建

    虚拟环境创建 安装 C:\Users\Python> pip install virtualenv Requirement already satisfied: virtualenv ) C:\ ...

  7. django.core.exceptions.AppRegistryNotReady: Apps aren't loaded yet.

    报错现象 django 启动的时候报错 django.core.exceptions.AppRegistryNotReady: Apps aren't loaded yet. 报错解决 记不清是我有毛 ...

  8. SQL循环语句 详解

    SQL循环语句 declare @i int set @i=1 while @i<30 begin insert into test (userid) values(@i) set @i=@i+ ...

  9. MT【263】待定系数

    已知$a,b>0$且$ab(a+b)=4$,求$2a+b$的最小值_____ 解答:$\sqrt{3}(2a+b)\ge(\sqrt{3}+1)a+b+(\sqrt{3}-1)(a+b)\ge3 ...

  10. redis主从复制和sentinel配置高可用

    一:redis主从配置1.环境准备 master : 192.168.50.10 6179 slave1: 192.168.50.10 6279 slave2: 192.168.50.10 63792 ...