FileReader与URL.createObjectURL实现图片、视频上传前预览
之前做图片、视频上传预览常用的方案是先把文件上传到服务器，等服务器返回文件的地址后，再把该地址字符串赋给img或video的src属性，这才实现所谓的文件预览。实际上这只是文件“上传后再预览”，这既浪费了用户的时间，也浪费了不可轻视的流量。
最近上网查资料才知道其实可以很轻松地实现“上传前预览”。实现方法有两种：FileReader和URL.createObjectURL。
关于FileReader的讲解可以看这里
关于URL.createObjectURL方法的讲解和应用可以看这里
直接上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>preview</title>
<style>
* {
box-sizing: border-box;
}
.section {
margin: 20px auto;
width: 500px;
border: 1px solid #666;
text-align: center;
}
.preview {
width: 100%;
margin-top: 10px;
padding: 10px;
min-height: 100px;
background-color: #999;
}
.preview img,
.preview video {
width: 100%;
}
</style>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div class="section">
<p>方案1</p>
<input class="upload" type="file" onchange=onUpload1(this.files[0])>
<div class="preview preview1"></div>
</div>
<div class="section">
<p>方案2</p>
<input class="upload" type="file" onchange=onUpload2(this.files[0])>
<div class="preview preview2"></div>
</div>
<script>
function onUpload1 (file) {
var fr = new FileReader();
fr.readAsDataURL(file); // 将文件读取为Data URL
fr.onload = function(e) {
var result = e.target.result;
if (/image/g.test(file.type)) {
var img = $('<img src="' + result + '">');
$('.preview1').html('').append(img);
} else if (/video/g.test(file.type)) {
var vidoe = $('<video controls src="' + result + '">');
$('.preview1').html('').append(vidoe);
}
}
}
function onUpload2 (file) {
var blob = new Blob([file]), // 文件转化成二进制文件
url = URL.createObjectURL(blob); //转化成url
if (/image/g.test(file.type)) {
var img = $('<img src="' + url + '">');
img[0].onload = function(e) {
URL.revokeObjectURL(this.src); // 释放createObjectURL创建的对象
}
$('.preview2').html('').append(img);
} else if (/video/g.test(file.type)) {
var video = $('<video controls src="' + url + '">');
$('.preview2').html('').append(video);
video[0].onload = function(e) {
URL.revokeObjectURL(this.src); // 释放createObjectURL创建的对象
}
}
}
</script>
</body>
</html>复制代码demo截图：
方案1、2 上传图片
方案1 上传视频
方案2 上传视频
可以看出FileReader和URL.createObjectURL都能完美的实现图片的预览，但对于视频的上传，FileReader就不行了，浏览器立马崩溃了。。。，然而URL.createObjectURL方法却完美实现。
关于二者的具体区别在网上一时没查清楚，但总体感觉URL.createObjectURL比FileReader性能更好一些。有什么说错的地方还望指正。
FileReader与URL.createObjectURL实现图片、视频上传前预览的更多相关文章
- JavaScript 图片的上传前预览（兼容所有浏览器）
功能描述 通过 JavaScript 实现图片的本地预览(无需上传至服务器),兼容所有浏览器(IE6&IE6+.Chrome.Firefox). 实现要点 ● 对于 Chrome.Fire ...
- html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
- file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
- 【转】html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
- hTML5实现表单内的上传文件框，上传前预览图片，针刷新预览images
hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...
- 【转】HTML5 jQuery图片上传前预览
hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url,一个空的img标签,ID为img0,把选 ...
- HTML5 jQuery图片上传前预览
hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择 ...
- input file实现多选，限制文件上传类型，图片上传前预览功能
限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② mu ...
- ASP.NET MVC图片上传前预览
回老家过春节,大半个月,在家的日子里,吃好睡好,人也长了3.5Kg.没有电脑,没有网络,无需写代码,工作上相关的完全放下......开心与父母妻儿过个年,那样的生活令Insus.NET现在还在留恋.. ...
随机推荐
- Anroid关于fragment控件设置长按事件无法弹出Popupwindows控件问题解决记录
一.问题描述 记录一下最近在安卓的gragment控件中设置长按事件遇见的一个坑!!! 在正常的activity中整个活动中设置长按事件我通常实例化根部局,例如LinearLayout ...
- 教你用纯Java实现一个网页版的Xshell（附源码）
前言 最近由于项目需求,项目中需要实现一个WebSSH连接终端的功能,由于自己第一次做这类型功能,所以首先上了GitHub找了找有没有现成的轮子可以拿来直接用,当时看到了很多这方面的项目,例如:Gat ...
- SQLi-Labs之1~6关 - 常规注入与盲注
年初五 财神入 第一关 联合注入 1.准备 2.加'截断 3.order by 判断查询列数 4.同上 5.联合查询判断字段位置 6.查数据库名 7.1 查表名 7.2 查列名 8.查数据 第二关 不 ...
- 《ASP.NET Core 3框架揭秘》博文汇总
在过去一段时间内,写了一系列关于ASP.NET Core 3相关的文章,其中绝大部分来源于即将出版的<ASP.NET Core 3框架揭秘>(博文只能算是"初稿",与书 ...
- js 实现弹性运动的简单应用----导航栏中弹性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【Python】Pyinstall打包不同尺寸ico制作
前言 最近工作之余在学习python,用Pyinstall打包exe的时候发现图标只能在任务栏或者大图的情况下出现,其他情况还是默认图标,,,!!!∑(ﾟДﾟノ)ノ 分析 查资料是因为exe在不同情况 ...
- Oracle数据库使用sysdba登陆时出现ORA-01031: insufficient privileges问题
今天在自己本本上装上了oracle数据库,然而在命令框登录时 用 sqlplus / as sysdba 时却出现了: insufficient privileges问题 原因就是没有加入ora_ ...
- Redis 服务端程序实现原理
上篇我们简单介绍了 redis 客户端的一些基本概念,包括其 client 数据结构中对应的相关字段的含义,本篇我们结合这些,来分析分析 redis 服务端程序是如何运行的.一条命令请求的完成,客户端 ...
- 【Weiss】【第03章】链表例程的一些修改
主要是,感觉原来的链表例程通过Node的分配形成了链表,但是没有自动消除Node的办法比较危险,一旦在clear()之前把链表赋了其它值就内存泄漏了. 所以改了析构函数,自动清理分配出来的内存.既然改 ...
- Spring扩展：替换IOC容器中的Bean组件 -- @Replace注解
1.背景: 工作中是否有这样的场景?一个软件系统会同时有多个不同版本部署,比如我现在做的IM系统,同时又作为公司的技术输出给其他银行,不同的银行有自己的业务实现(比如登陆验证.用户信息查询等) ...