关于前端上传文件全面基础扫盲贴二-File

jiezi

5 年前

在之前我们操作本地文件都是使用 flash、silverlight 或者第三方的 activeX 插件等技术，由于使用了这些技术后就很难进行跨平台、或者跨浏览器、跨设备等情况下实现统一的表现，从另外一个角度来说就是让我们的 web 应用依赖了第三方的插件，而不是很独立。为了解救上面说到的问题,File API 是 Mozilla 向 W3C 提交的一个草案，旨在推出一套标准的 JavaScript API，其基本功能是 实现用 JavaScript 对本地文件进行操作。出于安全性的考虑，该 API 只对本地文件提供有限的访问。有了它，我们就可以很轻松的用纯 JavaScript 来实现本地文件的读取和上传了。

先来看看浏览器的支持程度 (温馨提示: 下图只代表支持程度, 支持归支持, 不一定百分百支持, 所以用到部分方法时不兼容时正常的)

File 对象可以用来获取某个文件的信息, 还可以用来读取这个文件的内容. 通常情况下,File 对象 是来自用户在一个 <input> 元素上选择文件后返回的 FileList 对象, 也可以是来自由拖放操作生成的 DataTransfer 对象. 看看实际例子

<!DOCTYPE html>
<html>

  <head>
    <title></title>
  </head>

  <body>
    <p>Upload File: <input type="file" name="file" id='file' onchange="upload()"/></p>
    <script type="text/javascript">
      function upload() {console.log(document.getElementById('file').files[0])
      }
    </script>
  </body>

</html>

你们可以复制到本地去试试, 上传之后会出现一个对象, 也就是我们这次讲的内容:

属性	描述
lastModifiedDate	返回当前文件的最后修改日期, 如果无法获取到文件的最后修改日期, 则使用当前日期来替代
lastModified	文档没看到, 我大胆猜测, 是上面属性的时间戳形式
name	返回文件的名称. 由于安全原因, 返回的值并不包含文件路径
size	对于文件, 以字节为单位返回指定文件的大小. 对于文件夹, 以字节为单位返回文件夹中包含的所有子文件夹中的所有文件和子文件夹的大小
type	类型
webkitRelativePath	这个比较蒙, 估计是部分路径, 详情查阅请狠狠地点击英文论坛哦

还有挺多属性, 不过没用到, 有兴趣可以看看，详情查阅请狠狠地点击 Javascript–File 对象
暂时就介绍到这里, 然后你会发现这都是些上传信息, 有什么用?(给点小提示先: 过滤上传类型，限制大小，断点续传等都能用到)
没错, 用处不大, 因为还需要用到其他的东西

File API(知识点主要来源于关于 File API)