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) ...
随机推荐
- Docker镜像的使用
当运行容器时,使用的镜像如果在本地中不存在,docker 就会自动从 docker 镜像仓库中下载,默认是从 Docker Hub 公共镜像源下载. 下面我们来学习: 1.管理和使用本地 Docker ...
- poj 2226 Muddy Fields（水二分图）
Rain has pummeled the cows' field, a rectangular grid of R rows and C columns (1 <= R <= 50, 1 ...
- wstngfw中使用Viscosity连接OpenV-P-N服务器
wstngfw中使用Viscosity连接OpenV-P-N服务器 在本例中,将假设以下设置: 站点 A 站点 B 名称 Beijing Office(北京办公室) 名称 Shenzheng Offi ...
- 华为TaiShan 2280 ARM 服务器
华为TaiShan 2280 ARM 服务器 华为TaiShan 2280 ARM 服务器 https://e.huawei.com/cn/products/cloud-computing-dc/s ...
- requirements文件
将一个环境中安装的所有的包在另一个环境中安装 1.生成文件列表 pip freeze > requirements.txt 2.将该文件放入到新环境中,安装 pip install -r req ...
- php获取用户真实IP和防刷机制
一. 如何获取用户IP地址 public static function getClientIp() { if (getenv('HTTP_CLIENT_IP')) { $ip = getenv( ...
- android TextView字体设置最少占多少行. 及其 Java String 字符串操作 . .
① 字体设置: 修改代码 : GridViewActivity.java priceTv为 TextView priceTv.setMaxLines(3); //当多与7个字fu的时候 , 其余字 ...
- 【BZOJ5339】[TJOI2018]教科书般的亵渎（斯特林数）
[BZOJ5339][TJOI2018]教科书般的亵渎(斯特林数) 题面 BZOJ 洛谷 题解 显然交亵渎的次数是\(m+1\). 那么这题的本质就是让你求\(\sum_{i=1}^n i^{m+1} ...
- 故障排错-ping dup！
ping DUP! ping一个vc中虚拟机的地址发现如下,出现了DUP! . 解决方式如下: 1.根据mac地址找到虚拟机网卡的端口组 然后编辑绑定和故障切换,切换负责平衡
- 「NOI2015」寿司晚宴 解题报告
「NOI2015」寿司晚宴 这个题思路其实挺自然的,但是我太傻了...最开始想着钦定一些,结果发现假了.. 首先一个比较套路的事情是状压前8个质数,后面的只会在一个数出现一次的再想办法就好. 然后发现 ...