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

scola666 发布于2019-08-26 10:31 / 2337人阅读

摘要：为了解救上面说到的问题是向提交的一个草案，旨在推出一套标准的，其基本功能是实现用对本地文件进行操作。出于安全性的考虑，该只对本地文件提供有限的访问。

系列文章

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

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

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

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

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

Upload File:

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

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

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

云服务器 GPU云服务器服务器扫盲贴 js_file分段上传关于前端关于前端开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106297.html

关于前端上传文件全面基础扫盲贴(六) ----- 图片上传,旋转,重绘,预览等实战(附DEMO)

摘要：二编辑合成照片使用编辑压缩重设尺寸比例转成输出预览。三保存并上传照片提交数据到服务器需要服务器支持我跳过了。数据主要来自拍摄的照片，多用于移动端开发，端也会用到，此插件兼容主流浏览器，以下不支持。系列文章关于前端上传文件全面基础扫盲贴(零)关于前端上传文件全面基础扫盲贴(一) ----- XMLHttpRequest关于前端上传文件全面基础扫盲贴(二) ----- File关于前端...

lmxdawn 2019-08-26 10:31 评论0 收藏0
关于前端上传文件全面基础扫盲贴(三) ----- FormData

摘要：如果是传入三个参数的方式，那么该值将是一个布尔值，文件，或者一个，如果不是，将被转成一个字符串可选传给服务器的文件名称一个。系列文章关于前端上传文件全面基础扫盲贴(零)关于前端上传文件全面基础扫盲贴(一) ----- XMLHttpRequest关于前端上传文件全面基础扫盲贴(二) ----- File关于前端上传文件全面基础扫盲贴(三) ----- FormData关于前端上传文...

developerworks 2019-08-26 10:30 评论0 收藏0
关于前端上传文件全面基础扫盲贴(四) ----- FileReader

摘要：没有浏览器测试，所以不知道是不是有效，其实里面看起来比我写的那个复杂，实际上多了个检验格式上兼容写法所以不要怕，如果我错了记得提醒下我啊。目前为止其实已经该说的都差不多覆盖到了吧，动手能力强的话已经可以根据教程写一个实例出来的了。系列文章关于前端上传文件全面基础扫盲贴(零)关于前端上传文件全面基础扫盲贴(一) ----- XMLHttpRequest关于前端上传文件全面基础扫盲贴(...

Tony 2019-08-26 10:31 评论0 收藏0
关于前端上传文件全面基础扫盲贴(五) ----- H5拖拽事件

摘要：在中，拖放是标准的一部分，任何元素都能够拖放。如果需要设置允许放置，我们必须阻止对元素的默认处理方式方法。系列文章关于前端上传文件全面基础扫盲贴(零)关于前端上传文件全面基础扫盲贴(一) ----- XMLHttpRequest关于前端上传文件全面基础扫盲贴(二) ----- File关于前端上传文件全面基础扫盲贴(三) ----- FormData关于前端上传文件全面基础扫盲贴(...

iKcamp 2019-08-26 10:31 评论0 收藏0
关于前端上传文件全面基础扫盲贴(零)

摘要：表单用于向服务器传输数据。属性对象的属性指定了一个事件句柄函数。标签的属性应当与相关元素的属性相同。详情查阅请狠狠地点击关于对象代表表单中的一个提交按钮在表单提交之前，触发事件句柄，并且一个句柄可以通过返回来取消表单提交。系列文章关于前端上传文件全面基础扫盲贴(零)关于前端上传文件全面基础扫盲贴(一) ----- XMLHttpRequest关于前端上传文件全面基础扫盲贴(二) -...

SnaiLiu 2019-08-02 15:42 评论0 收藏0