H5新属性FileReader实现选择图片后立即显示在页面上
<!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实现选择图片后立即显示在页面上的更多相关文章
- input file选择图片后 预览
很多前端都选择用插件来实现图片预览,这个小功能也可以很简单的用jQuery来实现 简单的jQuery实现input file选择图片后,可以预览图片的效果 简单的HTML代码: <div> ...
- Input File选择图片后，未保存预览
今天实现上传图片到服务器 简单的jQuery实现input file选择图片后,可以预览图片的效果 简单的HTML代码: <div> <img src="" cl ...
- LaunchScreen.storyboard 设置图片后不显示(转)
LaunchScreen.storyboard 设置图片后不显示 将图片放在根目录下即可 3D85E99F-A79B-4419-817D-1417E1446624.png 转至:http://ww ...
- js实现FileUpload选择图片后预览功能
当asp.net的FileUpload选择一个图片后不需要上传就能显示出图片的预览功能, 代码: <%@ Page Language="C#" AutoEventWireup ...
- html选择图片后预览，保存并上传
html代码:------------------添加-------------------------- accept="image/gif,image/jpeg,image/jpg,im ...
- type="file" 选择图片后预览
function setImagePreview(avalue) { var docObj = document.getElementById("doc"); var imgObj ...
- H5新属性 contenteditable
contenteditable 属性规定元素内容是否可编辑 <div contenteditable style="width: 100px;height:100px"> ...
- h5新属性
<!DOCTYPE html> <html lang="en"> <head> <meta id="viewport" ...
- html5plus 从相册选择图片后获取图片的大小
plus.gallery.pick(function (filePath) { plus.io.resolveLocalFileSystemURL(filePath, function (entry) ...
随机推荐
- BZOJ2151种树——模拟费用流+链表+堆
题目描述 A城市有一个巨大的圆形广场,为了绿化环境和净化空气,市政府决定沿圆形广场外圈种一圈树.园林部门得到指令后,初步规划出n个种树的位置,顺时针编号1到n.并且每个位置都有一个美观度Ai,如果在这 ...
- 基准对象object中的基础类型----元组 (五)
object有如下子类: CLASSES object basestring str unicode buffer bytearray classmethod complex dict enumera ...
- 【XSY1081】随机存储器 网络流
题目描述 Bob有\(2^n\)字节的内存,编号为\([0,2^n-1)\).他想对每个字节的内存分别分配一个值.对于编号为\(i\)的内存,如果它被分配了一个值\(j(0\leq j<2^m) ...
- hdu 2844 Coins (多重背包+二进制优化)
链接:http://acm.hdu.edu.cn/showproblem.php?pid=2844 思路:多重背包 , dp[i] ,容量为i的背包最多能凑到多少容量,如果dp[i] = i,那么代表 ...
- LOJ#510 北校门外的回忆（找性质+倍增+线段树）
这题一场模拟赛我们出了弱化版(n<=1e6),抄题面给的程序能拿到71分的好成绩 其实后面的29分是加了几个1e9的数据卡人 这糟老头子真是坏得很 正解我们机房看了三天 在这里感谢这篇题解的作者 ...
- hdu1394逆序数（线段树）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1394 题目大意:逆序数:即假设在数组a中,假如i<j,但是a[i]>a[j]. 现在有一个 ...
- 解题：NOI2018 你的名字(68pts暴力)
题面 rt,如果省选没退役就补 SAM的优势:简单明了 先建S的SAM并标记所有节点,之后每次询问直接把T按广义SAM的方法插上去,统计新加的节点到根的状态代表的本质不同子串数,减掉被标记的部分就是T ...
- Python之函数的本质、闭包、装饰器
函数名的本质 函数名本质上就是函数的内存地址. 1.可以赋值给其他变量,被引用 def func(): print('in func') f = func print(f) 2.可以被当作容器类型的元 ...
- FluentScheduler定时器计划任务
http://www.cnblogs.com/lgxlsm/p/6734011.html 用了FluentScheduler后,再也比想用timer计时器了. FluentScheduler 是 .N ...
- IDEA2017.3.5破解
首先下载好idea, https://www.jetbrains.com/idea/download/previous.html 下载破解文件: https://pan.baidu.com/s/1tB ...