目录
- 基本结构
- 样式处理
- 为啥要做样式处理
- 怎么处理样式
- input内用到的属性及用法
- accept 可以上传的文件类型
- 获取上传后的文件
- sth.files
- 字段解释
- 获取视频文件的时长
- 获取上传后文件生成的blob链接
- 参考文档
基本结构
<label for="sth">上传文件</label>
<input type="file" id="sth" name="nickname">
图1:
样式处理
为啥要做样式处理
看上面图1
,原始样式很不好看,也不好处理。项目中,还会根据文件上传的状态,给出提示或其他交互内容。在原始的样式中,不容易实现。所以需要重新处理样式。
怎么处理样式
比如,项目中样式需要做成这样的:
具体做法是,因为点击label内容,就相当于点击了input上传按钮, 所以,根据这个特性,我们就把所有要表现出来的样式都放在label标签内,然后把input标签隐藏起来。
比如这样:
<label for="sth">
<span>上传视频</span>
<img src="./xxx" alt="">
</label>
<input type="file" id="sth" name="nickname" style="display: none;">
input内用到的属性及用法
accept 可以上传的文件类型
- 不写就默认可以上传所有类型的文件
- 写了之后,点击上传,就会根据要求去找设备中的符合类型的文件。 不符合类型的文件,就不会显示出来,更没法上传。
- 上传word文档
accept=".doc,.docx"
- 音频文件
- 任何音频文件
accept="audio/*"
- 特定音频文件写法一
- 直接写,以
.mp3
格式为例 accept=".mp3"
- 如果可以传多种格式,就用
,
把格式隔开 - 例如
accept=".mp3, .wma"
- 直接写,以
- 特定音频文件写法二
- 在格式前面加上音频标识,然后把
.
去掉 accept="audio/mp3, audio/wma"
- 在格式前面加上音频标识,然后把
- 任何音频文件
- 视频文件
- 任何视频文件
accept="video/*"
- 特定视频文件写法一
accept=".mp4,.avi"
- 特定视频文件写法二
accept="video/mp4, video/avi"
- 任何视频文件
- 图片文件
- 任何图片文件
accept="image/*"
- 特定图片文件写法一
accept=".jpg, .png"
- 特定图片文件写法二
accept="image/jpg, image/png"
- 任何图片文件
- 上传word文档
获取上传后的文件
<label for="sth">
<span>上传视频</span>
<img src="./xxx" alt="">
</label>
<input type="file" id="sth" name="nickname" style="display: none;">
以上面代码为例:
var sth = document.querySelector('#sth'); // 获取到输入框
sth.files
获取整个文件:
字段解释
lastModified
最近一次修改的时间戳lastModifiedDate
最近一次修改文件的标准时间name
文件全名size
文件大小,单位是字节。比如100M大小就是100 * 1024 *1024
字节type
文件类型length
文件个数
获取视频文件的时长
// 时长单位是秒s
var fileUrl = URL.createObjectURL(sth.files[0]);
var file_url = new Audio(fileUrl);
var duration;
file_url.addEventListener('loadedmetadata', function() {
duration = file_url.duration;
console.log(duration); // 时长
})
获取上传后文件生成的blob链接
var fileUrl = URL.createObjectURL(sth.files[0]);
console.log('fileUrl: ', fileUrl);
参考文档
https://www.w3school.com.cn/tags/tag_input.asp
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file
- 前端群:
1064534163