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) ...
随机推荐
- BZOJ2521[Shoi2010]最小生成树——最小割
题目描述 Secsa最近对最小生成树问题特别感兴趣.他已经知道如果要去求出一个n个点.m条边的无向图的最小生成树有一个Krustal算法和另一个Prim的算法.另外,他还知道,某一个图可能有多种不同的 ...
- BZOJ3676[Apio2014]回文串——回文自动机
题目描述 考虑一个只包含小写拉丁字母的字符串s.我们定义s的一个子串t的“出 现值”为t在s中的出现次数乘以t的长度.请你求出s的所有回文子串中的最 大出现值. 输入 输入只有一行,为一个只包含小写字 ...
- sql里的正则表达式
SQL语句还可以搭配正则表达式作为查询条件,很是有用. REGEXP_LIKE(匹配)REGEXP_INSTR (包含)REGEXP_REPLACE(替换)REGEXP_SUBSTR(提取) 表 1: ...
- 本文之后都以Vol1来指代
本文参考文档是<64-ia-32-architectures-software-developer-vol-1-manual>(本文之后都以Vol1来指代),介绍了x86架构的基础.这些基 ...
- 「TJOI2015」组合数学 解题报告
「TJOI2015」组合数学 这不是个贪心吗? 怎么都最小链覆盖=最大点独立集去了 注意到一个点出度最多只有2,可以贪心一下出度的去向 按读入顺序处理就可以,维护一个\(res_i\)数组,表示上一行 ...
- Glad You Came hdu-6356（ST表 || 线段树）
第一种用线段树,用两颗数维护区间最大值和区间的最小值,然后更新的时候如果我目前区间内的最大值比我得到的v小,那么我就把这个区间修改成v,如果我的最小值比v大,那么v就是没有用的,直接跳过,然后这样每次 ...
- maven将项目及第三方jar打成一个jar包
pom.xml中添加如下配置 把依赖包和自己项目的文件打包如同一个jar包(这种方式对spring的项目不支持) <build> <plugins> <plugin> ...
- 绝对音乐No.1
最近儿子在练天空之城钢琴曲.为了方便他听久石让的原版,绝对做张cd.另外加入了自己比较喜欢的几首乐曲.在家音响上聆听时发现,不管是中国乐曲,还是西洋乐,都很美,耳朵都出油了.放到网盘供喜爱之人欣赏,喜 ...
- 【CF1141F2】Same Sum Blocks
题解:发现可以通过枚举区间将区间和相同的元组记录在一个表中,对于答案来说,在同一个表中的元组的选择才会对答案产生贡献.发现每一个表中都是一个个区间,问题转化成了对于每一个表来说,选择若干个不相交的区间 ...
- vue使用element-ui 监听使用回车键事件
因为element-ui 对input做了封装,使用@keyup.enter="fn"触发Enter键事件就不会触发,解决:后面追加.native.@keyup.enter.nat ...