<!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. Codeforces Round #429 Div. 1

    A:甚至连题面都不用仔细看,看一下样例就知道是要把大的和小的配对了. #include<iostream> #include<cstdio> #include<cmath ...

  2. 「Splay」普通平衡树模板

    口诀: $rotate$:先上再下,最后自己 $splay$:祖父未到旋两次,三点一线旋父亲,三点折线旋自己. $delete$:没有儿子就删光.单个儿子删自己.两个儿子找前驱. 易错点: $rota ...

  3. [BJWC2010] 严格次小生成树

    [BJWC2010]严格次小生成树算法及模板 所谓次小生成树,即边权之和第二小的生成树,但所谓严格,就是不能和最小的那个相等. 求解严格次小生成树的方法一般有倍增和LCT两种.当然LCT那么高级的我当 ...

  4. IDEA如何查看maven的依赖结构

    打开方式: 方法一:该工具有个Maven Projects窗口,一般在右侧能够找到,如果没有可以从菜单栏打开:View>Tool Windows>Maven Projects:选择要分析的 ...

  5. Python 面试题_未完

    基础部分 1. 为什么学习Python 家里有在这个IT圈子里面,也想让我接触这个圈子,然后给我建议学的Python, 然后自己通过百度和向有学过Python的同学了解了Python,Python这门 ...

  6. pycharm 中的 全局搜索(ctrl+shift+f) 功能无法使用的原因

    全局搜索的时候Ctrl+Shift+F按键失灵,有的时候可以,有时又不行了,百思不得其解. 在網上搜索很多人說是搜狗输入法的快捷键冲突了,但是我的电脑用的是微软自带的输入法 后来打开微软的输入法设置发 ...

  7. NOIP2018凉凉记

    首先声明一下,我去不了TG,因为我太菜了GD的某教授把我打到PJ了…… 虽然就我这实力普及都不一定1= 不管了,这次是普及,就当扎实基础了.反正HF的 $\text{hhz}$ 也考PJ,见个面多好啊 ...

  8. 如何在jsp中引入bootstrap

    如何在jsp中引入bootstrap包: 1.首先在http://getbootstrap.com/上下载Bootstrap的最新版. 您会看到两个按钮: Download Bootstrap:下载 ...

  9. centos7安装saltstack

    环境是Cenos7 saltstack-master:192.168.0.140 saltstack-minion:192.168.0.141 安装epel yum源 yum -y install e ...

  10. php关联Apache和nginx

    编辑apache配置文件httpd.conf,以apache支持php vim /etc/httpd/httpd.conf添加如下二行 AddType application/x-httpd-php ...