当前位置： 首页 > news >正文

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

news 2026/4/19 8:30:42

之前做图片、视频上传预览常用的方案是先把文件上传到服务器，等服务器返回文件的地址后，再把该地址字符串赋给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实现图片、视频上传预览

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

编程日记 2023/11/26 2:18:04

基于python+Django+SVM算法模型的文本情感识别系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介1. 简介2. 技术栈3. 系统架构4. 关键模块介绍5. 如何运行 二、功能三、系统四. 总结 一项目简介 # 基于 Python Django SVM 算法模型的文本情感识别系统介…...

编程日记 2023/11/26 2:17:03

数据结构之栈与队列习题详解解析

个人主页&#xff1a;点我进入主页 专栏分类&#xff1a;C语言初阶 C语言程序设计————KTV C语言小游戏 C语言进阶 C语言刷题 数据结构初阶 欢迎大家点赞&#xff0c;评论&#xff0c;收藏。 一起努力&#xff0c;一起奔赴大厂。 目录 1.前言 2.概念题…...

编程日记 2023/11/26 2:16:02

C++ 动态规划 DP教程 （一）思考过程(*/ω＼*)

动态规划是一种思维方法&#xff0c;大家首先要做的就是接受这种思维方法&#xff0c;认同他&#xff0c;然后再去运用它解决新问题。 动态规划是用递推的思路去解决问题。 首先确定问题做一件什么事情&#xff1f; 对这件事情分步完成&#xff0c;分成很多步。 如果我们把整件…...

编程日记 2023/11/26 2:15:01

【python基础（九）】文件和异常详解：使用、读取、写入、追加、保存用户的信息，以及优雅的处理异常

文章目录 一. 从文件中读取数据1. 读取整个文件2. 文件路径3. 逐行读取4. 创建一个包含文件各行内容的列表 二. 写入文件1. 写入空文件2. 写入多行3. 附加到文件 三. 异常1. 处理ZeroDivisionError异常2. 使用try-except代码块3. try-except-else ing4. 处理FileNotFoundError异…...

编程日记 2023/11/26 2:13:59

详解C语言中的指针数组和数组指针

指针数组和数组指针是 C 语言中比较常见的两种类型。它们虽然名字很相似&#xff0c;但是含义、用法以及指向类型都不同&#xff0c;需要分开理解。 指针数组 指针数组是一个数组&#xff0c;其中每个元素都是一个指针。这些指针可以指向不同类型的数据&#xff0c;也可以指向…...

编程日记 2023/11/26 2:12:58

【done】剑指offer18：删除链表指定节点

力扣&#xff0c;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/11/26 2:11:56

图形编辑器开发：缩放和旋转控制点

大家好&#xff0c;我是前端西瓜哥。好久没写图形编辑器开发的文章了。 今天来讲讲控制点。它是图形编辑器的不可缺少的基础功能。 控制点是吸附在图形上的一些小矩形和圆形点击区域&#xff0c;在控制点上拖拽鼠标&#xff0c;能够实时对被选中进行属性的更新。 比如使用旋…...

编程日记 2023/11/26 2:10:56

【2023 云栖】阿里云田奇铣：大模型驱动 DataWorks 数据开发治理平台智能化升级

云布道师 本文根据 2023 云栖大会演讲实录整理而成&#xff0c;演讲信息如下&#xff1a; 演讲人&#xff1a;田奇铣 | 阿里云 DataWorks 产品负责人 演讲主题&#xff1a;大模型驱动 DataWorks 数据开发治理平台智能化升级 随着大模型掀起 AI 技术革新浪潮&#xff0c;大数…...

编程日记 2023/11/26 2:09:53

Rust语言入门教程(二) - 变量与作用域

变量与作用域 变量的声明与初始化 Rust的基本语法格式如下&#xff1a; fn main(){let bunnies 2; }语句以分号结尾&#xff0c;用花括号包含语句块。 Rust的语法其实借鉴了很多其他的语言&#xff0c;比如C语言和Python&#xff0c; 所以变量定义的格式看起来也跟很多我们…...

编程日记 2023/11/26 2:08:53

芯知识 | Flash可更换声音语音芯片—引领音频IC技术革新的新篇章

随着科技的飞速发展&#xff0c;人们对于电子产品的音频性能要求越来越高。在这种背景下&#xff0c;Flash可更换声音语音芯片应运而生&#xff0c;成为音频技术领域的一颗璀璨明星。本文将详细介绍Flash可更换声音语音芯片的特点、优势以及应用场景&#xff0c;展望其在未来科…...

编程日记 2023/11/26 2:07:52

合共软件创新亮相：第102届上海电子展成就技术新篇章

2023年&#xff0c;第102届中国&#xff08;上海&#xff09;电子展活动在全球瞩目中圆满落幕。作为下半年华东地区最具影响力的电子展会&#xff0c;此次盛会吸引了来自全球的600家领先企业&#xff0c;共同探讨电子元器件行业的最新发展成果和趋势。 本届展会围绕核心先导元器…...

编程日记 2023/11/26 2:04:49

Ubuntu20.04清理垃圾vscode缓存

使用VM虚拟机安装了Ubuntu系统&#xff0c;主目录空间越来越小&#xff0c;硬盘扩容之后很快又空间不足&#xff0c;甚至出现了开机卡黑屏的情况&#xff0c;这里记录一下解决过程。 1 重新开机进入系统 状态&#xff1a;卡到了开机黑屏状态&#xff0c;左上角有一条小横杠 原…...

编程日记 2023/11/26 2:03:47

网络数据结构skb_buff原理

skb_buff基本原理 内核中sk_buff结构体在各层协议之间传输不是用拷贝sk_buff结构体&#xff0c;而是通过增加协议头和移动指针来操作的。如果是从L4传输到L2&#xff0c;则是通过往sk_buff结构体中增加该层协议头来操作&#xff1b;如果是从L4到L2&#xff0c;则是通过移动sk_…...

编程日记 2023/11/26 2:02:46

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…...

编程日记 2023/11/26 2:01:45

windows版本的grafana如何离线安装插件

本文以安装clickhouse的插件为例&#xff0c;记录下如何离线安装插件 1 下载插件 ClickHouse plugin for Grafana | Grafana Labs 2 找到grafana的配置文件 打开编辑&#xff0c;搜索plugin关键字&#xff0c;修改plugin的加载目录 目录不存在&#xff0c;手动创建&#xff0…...

编程日记 2023/11/26 2:00:44

ElasticSearch01

ElasticSearch 版本&#xff1a;7.8 学习视频&#xff1a;尚硅谷 笔记&#xff1a;https://zgtsky.top/ ElasticSearch介绍 Elaticsearch&#xff0c;简称为es&#xff0c; es是一个开源的高扩展的分布式全文检索引擎&#xff0c;它可以近乎实时的存储、检索数据&#xff1b…...

编程日记 2023/11/26 1:59:42

GPT、GPT-2、GPT-3论文精读笔记

视频&#xff1a;GPT&#xff0c;GPT-2&#xff0c;GPT-3 论文精读【论文精读】_哔哩哔哩_bilibili MAE论文&#xff1a;把bert用回计算机视觉领域 CLIP论文&#xff1a;打通文本和图像 GPT 论文&#xff1a;Improving Language Understanding by Generative Pre-Training …...

编程日记 2023/11/26 1:58:41

深度学习八股文：混合精度训练过程出nan怎么办

其实如果是FP32的训练&#xff0c;基本的调试方法还是差不多&#xff0c;这里就讲一下混合精度训练过程中的nan。 混合精度训练使用较低的数值精度&#xff08;通常是半精度浮点数&#xff0c;例如FP16&#xff09;来加速模型训练&#xff0c;但在一些情况下&#xff0c;可能会…...

编程日记 2023/11/26 1:57:40

竞赛选题 题目：基于卷积神经网络的手写字符识别 - 深度学习

文章目录 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 前言…...

编程日记 2023/11/26 1:56:39

读写锁怎么用？操作系统中Reader Writer Locks实现与应用？

操作系统中的读写者问题是关于管理对共享数据的访问。它允许多个 reader 同时访问数据&#xff0c;但确保同一时间只有一个 writer 可以写入&#xff0c;且在写入过程中不允许任何 reader 读取。 这种方法有助于解决并发编程中的基本问题&#xff1a;为共享资源提供安全的访问…...

编程新知 2026/4/19 8:07:34

AcousticSense AI完整教程：搭建个人音乐分析平台

AcousticSense AI完整教程&#xff1a;搭建个人音乐分析平台 1. 项目介绍与核心价值 AcousticSense AI是一个将音乐"可视化"的智能分析平台&#xff0c;它能够像人类一样"看"音乐并识别风格。这个工具最吸引人的地方在于&#xff0c;它用了一种非常聪明的…...

编程新知 2026/4/19 7:36:50

Cosmos-Reason1-7B详细步骤：从/root/cosmos-reason-webui目录开始的定制化配置

Cosmos-Reason1-7B详细步骤&#xff1a;从/root/cosmos-reason-webui目录开始的定制化配置 1. 项目概述 Cosmos-Reason1-7B是NVIDIA开源的一款7B参数量的多模态物理推理视觉语言模型(VLM)&#xff0c;作为Cosmos世界基础模型平台的核心组件&#xff0c;专注于物理理解与思维链…...

编程新知 2026/4/19 6:04:17

Calibre中文路径保护插件：终极解决方案告别拼音路径困扰

Calibre中文路径保护插件&#xff1a;终极解决方案告别拼音路径困扰 【免费下载链接】calibre-do-not-translate-my-path Switch my calibre library from ascii path to plain Unicode path. 将我的书库从拼音目录切换至非纯英文&#xff08;中文&#xff09;命名 项目地址:…...

编程新知 2026/4/19 5:19:14

AI热修复不是幻想，而是已上线：某头部云厂商实测数据——平均MTTR从18分钟降至2.3秒，

第一章&#xff1a;2026奇点智能技术大会&#xff1a;AI代码热修复 2026奇点智能技术大会(https://ml-summit.org) 什么是AI代码热修复 AI代码热修复&#xff08;AI-Powered Hotfix&#xff09;指在不中断服务运行的前提下&#xff0c;由AI模型实时分析生产环境中的异常堆栈、…...

编程新知 2026/4/19 5:11:10

OpenAI发布GPT-5.4-Cyber：网络安全AI新利器

OpenAI周二正式发布了GPT-5.4-Cyber&#xff0c;这是其最新旗舰模型GPT-5.4的专属优化版本&#xff0c;针对网络安全防御场景进行了深度定制优化。此次发布正值竞争对手Anthropic推出前沿模型Mythos数日之后&#xff0c;再次点燃了AI安全领域的激烈竞争。 OpenAI Touts Wider A…...

编程新知 2026/4/19 4:36:32

5个实战技巧：用ChatGPT写编程提示词避坑指南（附Python示例）

5个实战技巧&#xff1a;用ChatGPT写编程提示词避坑指南&#xff08;附Python示例&#xff09; 在AI辅助编程的时代&#xff0c;编写有效的提示词&#xff08;Prompt&#xff09;已成为开发者必备的核心技能。本指南将聚焦Python开发场景&#xff0c;通过5个经过实战检验的技巧…...

编程新知 2026/4/19 1:59:06

芯片ESD防护设计避坑指南：从失效案例看如何优化你的电路

芯片ESD防护设计避坑指南&#xff1a;从失效案例看如何优化你的电路 静电放电&#xff08;ESD&#xff09;是芯片设计中最隐蔽的"隐形杀手"。据统计&#xff0c;超过60%的芯片早期失效与ESD事件相关&#xff0c;但大多数损伤在显微镜下才能被发现。我曾参与过一个智能…...

编程新知 2026/4/18 23:37:59

WSL2网络互通新思路：不折腾IP，用域名访问Win和Linux服务（附Python测试方法）

WSL2网络互通新思路&#xff1a;用域名优雅连接Windows与Linux服务 每次重启WSL2都要重新查找IP地址的日子该结束了。想象一下这样的场景&#xff1a;你在Windows上调试前端代码&#xff0c;需要频繁访问运行在WSL2中的API服务&#xff1b;或者反过来&#xff0c;在Linux环境下…...

编程新知 2026/4/18 23:15:14

Casely 再召回超 42.9 万个移动电源，新增事故致 1 人死亡

Casely 移动电源二次召回&#xff1a;事故再升级2025 年 4 月&#xff0c;Casely 首次召回超 42.9 万个 5000mAh 的 Power Pods 无线移动电源&#xff0c;原因是收到 51 起有关锂离子电池“过热、膨胀或起火”的报告&#xff0c;导致 6 人轻微烧伤。如今&#xff0c;该公司和美…...

编程新知 2026/4/18 20:35:44