FileReader与URL.createObjectURL实现图片、视频上传预览

之前做图片、视频上传预览常用的方案是先把文件上传到服务器,等服务器返回文件的地址后,再把该地址字符串赋给img或video的src属性,这才实现所谓的文件预览。实际上这只是文件“上传后再预览”,这既浪费了用户的时间,也浪费了不可轻视的流量。

最近上网查资料才知道其实可以很轻松地实现“上传前预览”。实现方法有两种:FileReader和URL.createObjectURL。

关于FileReader的讲解可以看这里

关于URL.createObjectURL方法的讲解和应用可以看这里

 IE10+

直接上代码:

<!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-FileReader</p><input class="upload" type="file" onchange=onUpload1(this.files[0])><div class="preview preview1"></div></div><div class="section"><p>方案2-createObjectURL</p><input class="upload" type="file" onchange=onUpload2(this.files[0])><div class="preview preview2"></div></div><script>// 方式一:FileReaderfunction onUpload1 (file) {var fr = new FileReader();fr.readAsDataURL(file);  // 将文件读取为Data URLfr.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);}}}// 方式二:createObjectURL(推荐)function onUpload2 (file) {var blob = new Blob([file]), // 文件转化成二进制文件url = URL.createObjectURL(blob); //转化成url// 或者直接:var url = window.URL.createObjectURL(file);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>

一个视频编码成dataUrl放到内存浏览器肯定崩溃,用createObjectURL生成的url应该是指向硬盘中的视频而不用加载到内存

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/165812.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java开发合同相关

【点我-这里送书】 本人详解 作者:王文峰,参加过 CSDN 2020年度博客之星,《Java王大师王天师》 公众号:JAVA开发王大师,专注于天道酬勤的 Java 开发问题中国国学、传统文化和代码爱好者的程序人生,期待你的关注和支持!本人外号:神秘小峯 山峯 转载说明:务必注明来源(…

集合的分类

Python内建的集合类&#xff0c;有有序和无序之分&#xff0c;还有可修改和不可修改之分。 1 有序和无序 有序是说某数据集合中的每个元素都有一个位置信息&#xff0c;通常用index表示&#xff0c;可以借助这种集合类型名和位置信息访问集合里的某元素值&#xff0c;在Pytho…

【开源】基于Vue.js的用户画像活动推荐系统

项目编号&#xff1a; S 061 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S061&#xff0c;文末获取源码。} 项目编号&#xff1a;S061&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 兴趣标签模块2.3 活…

[Android]使用Git将项目提交到GitHub

如果你的Mac还没有安装Git&#xff0c;你可以通过Homebrew来安装它&#xff1a; brew install git 方式一&#xff1a;终端管理 1.创建本地Git仓库 在项目的根目录下&#xff0c;打开终端&#xff08;Terminal&#xff09;并执行以下命令来初始化一个新的Git仓库&#xff1…

vue3-组件传参及计算属性

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;Vue篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来vue篇专栏内容:vue3-组件传参及计算属性 目录 vue3中的组件传参 1、父传子 2、子传父 toRef 与 toRefs vue3中…

数据结构 查找基本概念

敬请期待。。。 1. 适用于折半查找的表的存储方式及元素排列要求为&#xff08;顺序方式存储&#xff0c;元素有序 &#xff09;。 2. 有一个按元素值排好序的顺序表(长度大于2)&#xff0c;分别用顺序查找和折半查找与给定值相等的元素&#xff0c;比较次数分别是s和b&am…

拼接合并yuv序列转成mp4

ffmpeg需要用支持libx264的版本&#xff0c;如果需要&#xff0c;可以从这个网站下载编译支持libx264\x265的ffmpeg https://www.gyan.dev/ffmpeg/builds/packages/ffmpeg-6.1-essentials_build.7z #-*- coding:utf-8-*- import osif __name__ "__main__":# 1 输入…

实例讲解:在3dMax中如何使用python脚本?

如果你是Python或Maxscript的新手&#xff0c;你现在可以跟着这篇文章开始做一些代码了&#xff0c;本文将让我们从非常基本的东西开始学习。 如何在3dmax中获取选定的节点并打印出它们的名称&#xff1f;所有场景对象如何&#xff1f;我们直接看代码&#xff1a; import MaxP…

Word/PPT/PDF怎么免费转为JPG图片?

1、打开金鸣表格文字识别网站。 2、点击导航条上的“软件下载” 3、安装并打开金鸣表格文字识别软件。 4、点击顶部导航栏的“文件转图片”。 5、选择需要转换成图片的文件&#xff08;支持Word/PPT/PDF&#xff09;. 6、点“打开”程序将自动分页转换为图片。

【论文阅读笔记】Smil: Multimodal learning with severely missing modality

Ma M, Ren J, Zhao L, et al. Smil: Multimodal learning with severely missing modality[C]//Proceedings of the AAAI Conference on Artificial Intelligence. 2021, 35(3): 2302-2310.[开源] 本文的核心思想是探讨和解决多模态学习中的一个重要问题&#xff1a;在训练和测…

【dart线程之怎么处理异步和顺序异步任务队列】

dart线程之怎么处理异步和顺序异步任务队列 单线程的dart怎么处理异步任务的&#xff1f; 事件循环模型就是实现异步处理任务的核心。 关于阻塞式调用和非阻塞式调用的概念 阻塞和非阻塞关注的是程序在等待调用结果&#xff08;消息、返回值&#xff09;时的状态阻塞式调用…

JS中的OOP

JS中的OOP OOP 为我们解决了什么问题&#xff1f;想象一下&#xff0c;我们希望为教师提供一个平台&#xff0c;每位注册的教师都可以提交分数&#xff0c;并为课程分配作业和其他内容。 如果有一个地方&#xff08;在本例中是一个对象&#xff09;&#xff0c;可以访问所有教…

Python编写的爬虫为什么受欢迎?

每每回想起我当初学习python爬虫的经历&#xff0c;当初遇到的各种困难险阻至今都历历在目。即便当初道阻且长&#xff0c;穷且益坚&#xff0c;我也从来没有想过要放弃。今天我将以我个人经历&#xff0c;和大家聊一聊有关Python语音编写的爬虫的事情。谈一谈为什么最近几年py…

C#中的事件(委托的发布和订阅、事件的发布和订阅、EventHandler类、Windows事件)

目录 一、委托的发布和订阅 1.订阅操作符号“"和取消订阅操作符号“-” 2.示例源码 二、事件的发布和订阅 三、EventHandler类 四、Windows事件 C#中的事件是指某个类的对象在运行过程中遇到的一些特定事情&#xff0c;而这些特定的事情有必要通知给这个对象的使用者…

【海德教育】河北初级职称报名条件:

河北助理工程师 学历要求 大专毕业后满3年&#xff0c;工程类专业 本科毕业后满1年 &#xff0c;工程类专业 非工程类专业&#xff0c;年限增加2年即可。

多线程,线程池,线程的创建,线程池的参数

文章目录 多线程-1 高并发〇、使用多线程的场景1. 为什么使用多线程 1. 线程概述1.1 线程和进程1.2 并发和并行1.3 多线程的优势1.4 程序运行原理1.5 主线程 1.6 线程的 6 种状态2. 线程的创建和启动2.1 Thread类2.2创建线程有哪几种方法2.2.1 继承**Thread**类&#xff0c;重写…

centos7 安装docker

1.卸载旧版本&#xff0c;不管装没装过&#xff0c;执行一下&#xff0c;防止版本冲突 yum remove docker \ docker-client \ docker-client-latest \ docker-common \ docker-latest \ docker-latest-logrotate \ docker-logrotate \ docker-engine 2. yum安装gcc相关 以及 安…

electron27-react-mateos:基于electron+react18仿matePad桌面系统

基于Electron27React18ArcoDesign搭建桌面版OS管理系统。 electron-react-mateos 基于最新前端跨端技术栈electron27.xreact18arco-designzustand4sortablejs构建的一款仿制matePad界面多层级路由管理OS系统。 ElectronReactOS支持桌面多路由配置&#xff0c;新开窗口弹窗开启路…

YB4051系列设备是高度集成的 Li-lon 和 Li-Pol 线性充电器,针对便携式应用的小容量电池。

YB4051H 300mA 单电池锂离子电池充电器0.1 mA 终端&#xff0c;45nA 电池漏电流 概述&#xff1a; YB4051系列设备是高度集成的 Li-lon 和 Li-Pol 线性充电器&#xff0c;针对便携式应用的小容量电池。它是一个完整的恒流/恒压线性充电器。不需要外部感应电阻&#xff0c;由于…

51单片机利用I/O口高阻状态实现触摸控制LED灯

51单片机利用I/O口高阻状态实现触摸控制LED灯 1.概述 这篇文章介绍使用I/O口的高阻状态实现一个触摸控制LED灯亮灭的实验。该实验通过手触摸P3.7引脚&#xff0c;改变电平信号控制灯的亮灭。 2.实验过程 2.1.实验材料 名称型号数量单片机STC12C20521LED彩灯无1晶振12MHZ1电…