发表于： 2019-10-15 22:53:02
1 848
今天完成的事：
完成图片上传，文件大小单位转换
明天计划的事：
继续进行任务6-10
遇到的问题：
收获：
html5中有个input type=file元素。用该元素可以实现页面上传文件的功能
但一般的做法只是简单的在表单中操作，想要了解功能实现的过程
在页面上写一个input，选择一个图片，打印这个input对象
.png)
.png)
发现有下列值，在0中，有一个files对象
.png)
.png)
我选择的文件被记录到了这个对象中，这个是fileList对象，是一个只读对象，不能修改。
因为它不能修改，所以很难实现对已选中多个文件的删除某个文件等操作
里面记录了文件的name，size，type，和修改时间等，可知这个对象只存放了一些文件的信息，相当于是本地文件的索引，并不是把文件放到input中了，上传文件时它会再去找到实际的本地文件
利用这个files对象，我们可以实现很多功能，例如：
1.选择图片未经后端显示预览图片
2.文件 拖拽的方法保存文件
- accept属性该属性表明了服务器端可接受的文件类型，可以限制你手机选择相关的文件，如果限制多个，可以用逗号分割，下面的代码就表示只能选择图片与音频相关的文件：<input accept="image/*,audio/*" type="file"/>
- change事件当用户点击控件上传文件会触发change事件，在移动端点击控件时会弹出键盘，体验非常不友好，通过设置属性`onfocus="this.blur()"`使其失去焦点<input type="file" id="upload" onfocus="this.blur()"/>
- file对象用户所选择的文件都存储在了一个[FileList](https://developer.mozilla.org/zh-CN/docs/Web/API/FileList)对象上，其中每个文件都对应了一个[File](https://developer.mozilla.org/zh-CN/docs/Web/API/File)对象
file对象一共由9个属性 获取上次修改的时间
file[0].lastModifiedDate)
获取文件名
file[0].name
获取大小
file[0].size
获取类型
file[0].type
返回列表
评论