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) ...
随机推荐
- CDQ题目套路总结 [未完成]
CDQ学习资料 day1cdq分治相关 CDQ的IOI论文 1.优化斜率dp 左边对右边影响维护一个凸包解决 需要知识:①凸包②斜率dp 题目:√ HDU3842 Machine Works HY ...
- 洛谷P1402 酒店之王
传送门:>Here< 题意:有N个人去酒店,酒店共有P个房间,Q道菜.已知每个人喜欢特定的几个房间和几道菜,一个人是满意的当且仅当住了喜欢的房间,吃了喜欢的菜(一个人只能选一个房间一道菜) ...
- Marriage Match III HDU - 3277（二分权值 + 拆点 建边）
题意: 只不过是hdu3081多加了k种选择 想一下,最多能玩x轮,是不是就是每个女生能最多选x个男生 现在题中的每个女生比3081多了k中选择 那就把女生拆点 i i‘ i --> i ...
- Python35安装
wnm系列之python安装 下载网址https://www.python.org/downloads/ 之前就用的3.5.4版本,这次还下这个 安装,我直接选择的install now 默认位置安装 ...
- python学习日记（编码再回顾）
当想从一种编码方式转换为另一种编码方式时,执行的就是以上步骤. 在python3里面,默认编码方式是unicode,所以无需解码(decode),直接编码(encode)成你想要的编码方式就可以了. ...
- python学习日记（python2/3区别补充，is / id/ encode str,bytes）
python2和python3区别 print python2中,print 是语句 :用法 ---->print '***' python3中,print 是函数:用法----->pri ...
- THUSC2017 Day1题解
THUSC2017 Day1题解 巧克力 题目描述 "人生就像一盒巧克力,你永远不知道吃到的下一块是什么味道." 明明收到了一大块巧克力,里面有若干小块,排成n行m列.每一小块都有 ...
- 最小表示法模板（洛谷P1368 工艺）（最小表示法）
洛谷题目传送门 最小表示是指一个字符串通过循环位移变换(第一个移到最后一个)所能得到的字典序最小的字符串. 因为是环状的,所以肯定要先转化为序列,把原串倍长. 设决策点为一个表示法的开头.比较两个决策 ...
- js-基本语法
条件语句 通过条件来控制程序的走向,就需要用到条件语句. 运算符 1.算术运算符: +(加). -(减). (乘). /(除). %(求余) 2.赋值运算符:=. +=. -=. =. /=. %= ...
- A1114. Family Property
This time, you are supposed to help us collect the data for family-owned property. Given each person ...