网站首页 > 技术文章 正文
作者：linong
转发链接：https://segmentfault.com/a/1190000022597533
前言
前天有个需求，上传前需要校验视频长度。
其实预览功能实现上都差不多，所以今天我们都来实现一下咯。
选择文件
一般来说上传常见的操作就三种，单击、拖拽、粘贴。下面我们分别来说一下。
input 选择文件
我们无法获取用户本地的内容，需要通过 <input> 标签，让用户自己选取。
<input type="file" name="input" id="input" @change="inputHandler">
但是 <input> 标签有个弊端：样式无法自定义（效果很奇怪）。
我们这里通过 <label for="input"> 来和 <input id="input"> 标签关联（label 的 for 和 input 的 id 需要一样）起来，这样单击 <label> 和单击 <input> 的效果是一样的，而且 <label> 标签可以任意修改。
拖拽文件
之前有在文件上传中讲过。
<label for="input" class="upload-wrap"
:class="{'upload-wrap--hover': dragover}"
@drop.prevent="onDrop"
@dragover.prevent="dragover = true"
@dragleave.prevent="dragover = false">@drop.prevent 是用来捕获结果的。@dragover.prevent="dragover = true" 是用来捕获拖拽移入@dragleave.prevent="dragover = false" 是用来捕获拖拽移出
粘贴文件
之前有在文件上传中讲过。
一文了解文件上传全过程（1.8w字深度解析）「前端进阶必备」
不过这个场景一般在富文本编辑器中比较常见（比如思否的编辑器，粘贴过来图片会上传），咱们这里不就讲了。
解析文件
音频&视频
通过 URL.createObjectURL 生成一个可访问的地址。然后通过 audio、video 解析这个资源，需要在 onloadedmetadata 回调里面再获取。
var file = el.files[0];
var video = document.createElement('video');
video.src = URL.createObjectURL(file);
video.onloadedmetadata = function(){
console.log('长度', video.duration, 's')
}图片
通过 URL.createObjectURL 生成一个可访问的地址。然后通过 img 解析这个资源，需要在 onload 回调里面再获取。
var file = el.files[0];
var img = document.createElement('img');
img.src = URL.createObjectURL(file);
img.onload = function(){
console.log('宽高', img.naturalWidth, img.naturalHeight)
}文本
文本的话直接用 FileReader 就能读取。
var fileReader = new FileReader();
fileReader.readAsText(file)
fileReader.onload = () => {
console.log(fileReader.result)
}其他类型
- excel 有对应库 js-xlsx.js
js-xlsx.js : https://github.com/SheetJS/sheetjs
- pdf 有对应库 pdf.js
https://github.com/mozilla/pdf.js
有需求再说吧，目前的应该也满足业务要求了。
推荐JavaScript经典实例学习资料文章
《推荐13个有用的JavaScript数组技巧「值得收藏」》
《36个工作中常用的JavaScript函数片段「值得收藏」》
《一文了解文件上传全过程（1.8w字深度解析）「前端进阶必备」》
《手把手教你如何编写一个前端图片压缩、方向纠正、预览、上传插件》
《JavaScript正则深入以及10个非常有意思的正则实战》
《前端开发规范：命名规范、html规范、css规范、js规范》
《100个原生JavaScript代码片段知识点详细汇总【实践】》
《手把手教你深入巩固JavaScript知识体系【思维导图】》
《一个合格的中级前端工程师需要掌握的 28 个 JavaScript 技巧》
《身份证号码的正则表达式及验证详解(JavaScript，Regex)》
《127个常用的JS代码片段，每段代码花30秒就能看懂-【上】》
《深入浅出讲解JS中this/apply/call/bind巧妙用法【实践】》
《干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)》
《面试中教你绕过关于 JavaScript 作用域的 5 个坑》
作者：linong
转发链接：https://segmentfault.com/a/1190000022597533
猜你喜欢
- 2024-10-03 .NET Core WebAPI 基础文件上传 winform调用webapi上传文件
- 2024-10-03 SpringBoot中实现文件上传下载的三种解决方案(推荐)
- 2024-10-03 SPRING BOOT实现文件上传和下载 spring boot 上传文件 路径
- 2024-10-03 前端进行上传文件打压缩包上传操作
- 2024-10-03 前端上传文件—非框架 前端怎么实现上传图片
- 2024-10-03 基于SPRINGBOOT实现文件的上传下载
- 2024-10-03 在 Go 中上传文件 golang 大文件上传
- 2024-10-03 前端大文件上传优化方案——分片上传
- 2024-10-03 网页中实现文件上传下载的三种解决方案(推荐)
- 2024-10-03 前端工程师进阶:基于业务场景下的图片/文件上传方案总结
欢迎 你 发表评论:
- 481℃几个Oracle空值处理函数 oracle处理null值的函数
- 475℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 473℃Oracle分析函数之Lag和Lead()使用
- 460℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 455℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 451℃【数据统计分析】详解Oracle分组函数之CUBE
- 432℃Oracle有哪些常见的函数? oracle中常用的函数
- 428℃最佳实践 | 提效 47 倍，制造业生产 Oracle 迁移替换
- 最近发表
-
- Spring Boot跨域难题终结者:3种方案，从此告别CORS噩梦!
- 京东大佬问我,SpringBoot为什么会出现跨域问题?如何解决?
- 在 Spring Boot3 中轻松解决接口跨域访问问题
- 最常见五种跨域解决方案（常见跨域及其解决方案）
- Java Web开发中优雅应对跨域问题（java跨域问题解决办法）
- Spring Boot解决跨域最全指南:从入门到放弃?不，到根治!
- Spring Boot跨域问题终极解决方案:3种方案彻底告别CORS错误
- Spring Cloud 轻松解决跨域，别再乱用了
- Github 太狠了，居然把 "master" 干掉了
- IntelliJ IDEA 调试 Java 8，实在太香了
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端react (48)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端富文本编辑器 (47)
- 前端路由 (55)
- 前端数组 (65)
- 前端定时器 (47)
- Oracle RAC (73)
- oracle恢复 (76)
- oracle 删除表 (48)
- oracle 用户名 (74)
- oracle 工具 (55)
- oracle 内存 (50)
- oracle 导出表 (57)
- oracle 中文 (51)
- oracle链接 (47)
- oracle的函数 (57)
- 前端调试 (52)
- 前端登录页面 (48)
本文暂时没有评论，来添加一个吧(●'◡'●)