关于原生html和js上传文件的处理

基本结构

<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"

---

获取上传后的文件

<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

---