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应该是指向硬盘中的视频而不用加载到内存
相关文章：
FileReader与URL.createObjectURL实现图片、视频上传预览
之前做图片、视频上传预览常用的方案是先把文件上传到服务器，等服务器返回文件的地址后，再把该地址字符串赋给img或video的src属性，这才实现所谓的文件预览。实际上这只是文件“上传后再预览”，这既浪费了用户的时间，也…...
基于python+Django+SVM算法模型的文本情感识别系统
欢迎大家点赞、收藏、关注、评论啦 ，由于篇幅有限，只展示了部分核心代码。 文章目录 一项目简介1. 简介2. 技术栈3. 系统架构4. 关键模块介绍5. 如何运行 二、功能三、系统四. 总结 一项目简介 # 基于 Python Django SVM 算法模型的文本情感识别系统介…...
数据结构之栈与队列习题详解解析
个人主页：点我进入主页 专栏分类：C语言初阶 C语言程序设计————KTV C语言小游戏 C语言进阶 C语言刷题 数据结构初阶 欢迎大家点赞，评论，收藏。 一起努力，一起奔赴大厂。 目录 1.前言 2.概念题…...
C++ 动态规划 DP教程 （一）思考过程(*/ω＼*)
动态规划是一种思维方法，大家首先要做的就是接受这种思维方法，认同他，然后再去运用它解决新问题。 动态规划是用递推的思路去解决问题。 首先确定问题做一件什么事情？ 对这件事情分步完成，分成很多步。 如果我们把整件…...
【python基础（九）】文件和异常详解：使用、读取、写入、追加、保存用户的信息，以及优雅的处理异常
文章目录 一. 从文件中读取数据1. 读取整个文件2. 文件路径3. 逐行读取4. 创建一个包含文件各行内容的列表 二. 写入文件1. 写入空文件2. 写入多行3. 附加到文件 三. 异常1. 处理ZeroDivisionError异常2. 使用try-except代码块3. try-except-else ing4. 处理FileNotFoundError异…...
详解C语言中的指针数组和数组指针
指针数组和数组指针是 C 语言中比较常见的两种类型。它们虽然名字很相似，但是含义、用法以及指向类型都不同，需要分开理解。 指针数组 指针数组是一个数组，其中每个元素都是一个指针。这些指针可以指向不同类型的数据，也可以指向…...
【done】剑指offer18：删除链表指定节点
力扣，https://leetcode.cn/problems/shan-chu-lian-biao-de-jie-dian-lcof/description/ // 自己写的答案 class Solution {public ListNode deleteNode(ListNode head, int val) {if (head null) {return null;}if (head.val val) {return head.next;}ListNode …...
图形编辑器开发：缩放和旋转控制点
大家好，我是前端西瓜哥。好久没写图形编辑器开发的文章了。 今天来讲讲控制点。它是图形编辑器的不可缺少的基础功能。 控制点是吸附在图形上的一些小矩形和圆形点击区域，在控制点上拖拽鼠标，能够实时对被选中进行属性的更新。 比如使用旋…...
【2023 云栖】阿里云田奇铣：大模型驱动 DataWorks 数据开发治理平台智能化升级
云布道师 本文根据 2023 云栖大会演讲实录整理而成，演讲信息如下： 演讲人：田奇铣 | 阿里云 DataWorks 产品负责人 演讲主题：大模型驱动 DataWorks 数据开发治理平台智能化升级 随着大模型掀起 AI 技术革新浪潮，大数…...
Rust语言入门教程(二) - 变量与作用域
变量与作用域 变量的声明与初始化 Rust的基本语法格式如下： fn main(){let bunnies 2; }语句以分号结尾，用花括号包含语句块。 Rust的语法其实借鉴了很多其他的语言，比如C语言和Python， 所以变量定义的格式看起来也跟很多我们…...
芯知识 | Flash可更换声音语音芯片—引领音频IC技术革新的新篇章
随着科技的飞速发展，人们对于电子产品的音频性能要求越来越高。在这种背景下，Flash可更换声音语音芯片应运而生，成为音频技术领域的一颗璀璨明星。本文将详细介绍Flash可更换声音语音芯片的特点、优势以及应用场景，展望其在未来科…...
合共软件创新亮相：第102届上海电子展成就技术新篇章
2023年，第102届中国（上海）电子展活动在全球瞩目中圆满落幕。作为下半年华东地区最具影响力的电子展会，此次盛会吸引了来自全球的600家领先企业，共同探讨电子元器件行业的最新发展成果和趋势。 本届展会围绕核心先导元器…...
Ubuntu20.04清理垃圾vscode缓存
使用VM虚拟机安装了Ubuntu系统，主目录空间越来越小，硬盘扩容之后很快又空间不足，甚至出现了开机卡黑屏的情况，这里记录一下解决过程。 1 重新开机进入系统 状态：卡到了开机黑屏状态，左上角有一条小横杠 原…...
网络数据结构skb_buff原理
skb_buff基本原理 内核中sk_buff结构体在各层协议之间传输不是用拷贝sk_buff结构体，而是通过增加协议头和移动指针来操作的。如果是从L4传输到L2，则是通过往sk_buff结构体中增加该层协议头来操作；如果是从L4到L2，则是通过移动sk_…...
SpringCache使用详解
SpringCache 1.新建测试项目SpringCache2.SpringCache整合redis2.1.Cacheable2.2.CacheEvict2.3.Cacheput2.4.Caching2.5.CacheConfig 3.SpringCache问题4.SpringCache实现多级缓存 1.新建测试项目SpringCache 引入依赖 <dependencies><dependency><groupId&g…...
windows版本的grafana如何离线安装插件
本文以安装clickhouse的插件为例，记录下如何离线安装插件 1 下载插件 ClickHouse plugin for Grafana | Grafana Labs 2 找到grafana的配置文件 打开编辑，搜索plugin关键字，修改plugin的加载目录 目录不存在，手动创建࿰…...
ElasticSearch01
ElasticSearch 版本：7.8 学习视频：尚硅谷 笔记：https://zgtsky.top/ ElasticSearch介绍 Elaticsearch，简称为es， es是一个开源的高扩展的分布式全文检索引擎，它可以近乎实时的存储、检索数据；…...
GPT、GPT-2、GPT-3论文精读笔记
视频：GPT，GPT-2，GPT-3 论文精读【论文精读】_哔哩哔哩_bilibili MAE论文：把bert用回计算机视觉领域 CLIP论文：打通文本和图像 GPT 论文：Improving Language Understanding by Generative Pre-Training …...
深度学习八股文：混合精度训练过程出nan怎么办
其实如果是FP32的训练，基本的调试方法还是差不多，这里就讲一下混合精度训练过程中的nan。 混合精度训练使用较低的数值精度（通常是半精度浮点数，例如FP16）来加速模型训练，但在一些情况下，可能会…...
竞赛选题 题目：基于卷积神经网络的手写字符识别 - 深度学习
文章目录 0 前言1 简介2 LeNet-5 模型的介绍2.1 结构解析2.2 C1层2.3 S2层S2层和C3层连接 2.4 F6与C5层 3 写数字识别算法模型的构建3.1 输入层设计3.2 激活函数的选取3.3 卷积层设计3.4 降采样层3.5 输出层设计 4 网络模型的总体结构5 部分实现代码6 在线手写识别7 最后 0 前言…...
(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)
题目：3442. 奇偶频次间的最大差值 I 思路 ：哈希，时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况，哈希表这里用数组即可实现。 C版本： class Solution { public:int maxDifference(string s) {int a[26]…...
Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）
文章目录 1.什么是Redis？2.为什么要使用redis作为mysql的缓存？3.什么是缓存雪崩、缓存穿透、缓存击穿？3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...
理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端
🌟 什么是 MCP？ 模型控制协议 (MCP) 是一种创新的协议，旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议，它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...
渲染学进阶内容——模型
最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...
【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力
引言： 在人工智能快速发展的浪潮中，快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型（LLM）。该模型代表着该领域的重大突破，通过独特方式融合思考与非思考…...
2021-03-15 iview一些问题
1.iview 在使用tree组件时，发现没有set类的方法，只有get，那么要改变tree值，只能遍历treeData，递归修改treeData的checked，发现无法更改，原因在于check模式下，子元素的勾选状态跟父节…...
IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)
文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...
：观察者模式)
JS设计模式(4)：观察者模式
JS设计模式(4):观察者模式 一、引入 在开发中，我们经常会遇到这样的场景：一个对象的状态变化需要自动通知其他对象，比如： 电商平台中，商品库存变化时需要通知所有订阅该商品的用户；新闻网站中࿰…...
基于Java+MySQL实现（GUI）客户管理系统
客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息，对客户进行统一管理，可以把所有客户信息录入系统，进行维护和统计功能。可通过文件的方式保存相关录入数据，对…...
（一）单例模式
一、前言 单例模式属于六大创建型模式，即在软件设计过程中，主要关注创建对象的结果，并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计，从而隐藏了类对象的实例是如何被创建的，封装了软件系统使用的具体对象类型。 六大创建型模式包括…...