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现在还在留恋.. ...
随机推荐
- 随着php7的发布我个人觉得有必要进行一下历史回顾和整理
先看下人尽皆知的发展历史: HP 继承自一个老的工程,名叫 PHP/FI.PHP/FI 在 1995 年由 Rasmus Lerdorf 创建,最初只是一套简单的 Perl 脚本,用来跟踪访问他主页的 ...
- 使用 ALSAlib 播放 wav
在 ARM 2440 开发板上正常播放 16bit 44100 采样率的wav , 为了程序简单,没有判断返回值. 补充,在 ubunto 上也能正常播放. 编译方法: arm-linux-gcc ...
- java中的对象 方法 引用 等一些抽象的概念是什么意思呢？
2020-03-14 最近这一段时间有点忙,好久都没有更新博客了,之后我会一直坚持下去的,和大家一同进步的. 这段时间一直在学java,相信刚开始学习java的小白,刚开始接触那么些抽象的概念一定和我 ...
- Sublime text 3 运行python3
要在Sublime text3编译器中成功运行 python3,需要在编译器设置中将python3添加至编译器中 新建编译系统 编辑弹出的文件,添加如下内容: { "cmd":[& ...
- PBM error occurred during PreCloneCheckCallback: 由于目标计算机积极拒绝，无法连接
问题如下: 迁移存储和主机的时候发生错误,错误如下: 出现了常规系统错误: PBM error occurred during PreCloneCheckCallback: 由于目标计算机积极拒绝,无 ...
- SpringCloud微服务：Sentinel哨兵组件，管理服务限流和降级
源码地址:GitHub·点这里||GitEE·点这里 一.基本简介 1.概念描述 Sentinel 以流量为切入点,从流量控制.熔断降级.系统负载保护等多个维度保护服务的稳定性.包括核心的独立类库,监 ...
- 后端程序员不得不会的 Nginx 转发匹配规则
整理了一些Java方面的架构.面试资料(微服务.集群.分布式.中间件等),有需要的小伙伴可以关注公众号[程序员内点事],无套路自行领取 一口气说出 9种 分布式ID生成方式,面试官有点懵了 面试总被问 ...
- Natas0-34 Writeup
Natas是一个教授服务器端Web安全基础知识的 wargame,通过在每一关寻找Web安全漏洞,来获取通往下一关的秘钥,适合新手入门Web安全. 传送门~ 接下来给大家分享一下,1-34题的Writ ...
- js遍历删除对象的key
// 如果用户没有填写值,则删除对象的key. Object.keys(obj).forEach( (key) => { if (!obj[key]) { // !obj[key]表示 ...
- 4L-线性表之数组
关注公众号 MageByte,设置星标点「在看」是我们创造好文的动力.后台回复 "加群" 进入技术交流群获更多技术成长. 数组对于每一门编程语言来说都是重要的数据结构之一,当然不同 ...