优化实战 第 53 期 - 文件操作的一系列优化方案

丢丢哥
3,296 阅读1分钟

获取到文件对象后，由于业务需要，通常需要对文件进行一系列的操作

根据文件大小的不同，会引发各种性能相关的问题，为了提升用户体验和响应速度，针对不同的问题来制定相对应的优化方案

获取文件对象

  • 普通函数方式

    fileInput.addEventListener('change', function() {
  const files = [...this.files]
})

  • 箭头函数方式

    fileInput.addEventListener('change', () => {
  const files = [...event.target.files]
})

  • 注意事项

    fileInput.addEventListener('change', () => {
  const files = [...event.target.files]
  event.target.value = null
})

    选择文件后，文件名会存放在表单的 value 值中，如果该值选取前后不发生变化，就不会触发 change 事件

    在未选取任何文件对象的情况下，点击取消关闭文件选择框时，则会触发 change 事件

    基于以上两种情况，一定要清空表单的 value 值

操作文件对象

avatar
文章
阅读
粉丝