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

时间 2020-01-17

标签关于前端上传文件全面基础扫盲 file 繁體版

原文原文链接

系列文章

关于前端上传文件全面基础扫盲贴(零)
关于前端上传文件全面基础扫盲贴(一) ----- XMLHttpRequest
关于前端上传文件全面基础扫盲贴(二) ----- File
关于前端上传文件全面基础扫盲贴(三) ----- FormData
关于前端上传文件全面基础扫盲贴(四) ----- FileReader
关于前端上传文件全面基础扫盲贴(五) ----- H5拖拽事件
 关于前端上传文件全面基础扫盲贴(六) ----- 图片上传,旋转,重绘,预览等实战(附DEMO)javascript

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

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

先来看看浏览器的支持程度(舒适提示:下图只表明支持程度,支持归支持,不必定百分百支持,因此用到部分方法时不兼容时正常的)

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>

大家能够复制到本地去试试,上传以后会出现一个对象,也就是咱们此次讲的内容:
java

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

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