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) ...
随机推荐
- Codeforces543 B. Destroying Roads
传送门:>Here< 题意:给出一张无向图(边权为1),并给出两对起点和终点以及距离:s1,t1,l1; s2,t2,l2; 要求删除尽量多的边,使得dis(s1,t1)<=l1, ...
- codeforces1096G Lucky Tickets
题目链接:https://codeforces.com/problemset/problem/1096/G 大意:给出\(k\)个数码\(d_1,d_2,\cdots,d_k\),构造一个由这\(k\ ...
- MT【248】$f(x)=\dfrac{1}{x-1}+\dfrac{1}{x-b}$的性质
探讨函数$f(x)=\dfrac{1}{x-a}+\dfrac{1}{x-b}$其中$a<b$的几个性质 分析:对称性:关于$(\dfrac{a+b}{2},0)$证明提示:$f(x)+f(a+ ...
- 执行sql脚本保留操作日志
需求场景,操作数据库场景较多,无专业dba,腾讯云mysql虽然提供了类似于phpmyadmin的管理后台,但是操作卡,效率低 #!/usr/bin CDATE=`date +%Y%m%d-%H%M% ...
- 【BZOJ5316】[JSOI2018]绝地反击（网络流，计算几何，二分）
[BZOJ5316][JSOI2018]绝地反击(网络流,计算几何,二分) 题面 BZOJ 洛谷 题解 很明显需要二分一个答案. 那么每个点可以确定的范围就是以当前点为圆心,二分出来的答案为半径画一个 ...
- Apache动态加载模块
添加步骤:如要额外安装cgi,先找到mod_cgi.c及mod_cgid.c.一般在apache安装包目录下,如 ./httpd-2.2.25/modules/generators .#编译安装 cg ...
- 整车CAN网络介绍
CAN(Controller Area Network)控制器局域网络,CAN网络在早期的整车应用中以BCM(车身控制器)为控制中心,主要是车身零部件(雨刮/大灯/车窗…),智能硬件较少,所以早期的正 ...
- QBXT Day2主要是数据结构（没写完先占坑）
简单数据结构 本节课可能用到的一些复杂度: O(log n). 1/1+1/1/.....1/N+O(n log n) 在我们初学OI的时候,总会遇到这么一道题. 给出N次操作,每次加入一个数,或者询 ...
- LaTex in Markdown
上次写了Markdown,这次用到了LaTex,也出一期(吐槽,工作量比Markdown高太多...) Markdown基础:https://www.cnblogs.com/dotnetcrazy ...
- 小白眼中的AI之～Numpy基础
周末码一文,明天见矩阵- 其实Numpy之类的单讲特别没意思,但不稍微说下后面说实际应用又不行,所以大家就练练手吧 代码裤子: https://github.com/lotapp/BaseCode ...