发表于: 2017-06-22 22:40:09
1 854
今天完成的任务:
做article新增页面
学习 input:file类型控制
FileReader对象
明天计划的事情:
将图片上传至服务器。
遇到的问题:
暂无。
收获:
input:file
是html5新增的表单上传元素,有如下属性:
1、accept
使用mine类型值,如:accept="image/png,image/gif"
2、multiple
选则多个文件:multiple="multiple"
可在父form中使用enctype="multipart/form-data"开启原生上传效果。
若要清除file,可用value = ""清空值即可。
FileReader对象:
FileReader主要用于将文件内容读入内存,通过一系列异步接口,可以在主线程中访问本地文件。可用于在线预览本地文件。FileReader 的实例拥有 4 个方法,其中 3 个用以读取文件,另一个用来中断读取。这一结果存储在 result属性中。
1.readAsText:该方法有两个参数,其中第二个参数是文本的编码方式,默认值为 UTF-8。这个方法非常容易理解,将文件以文本方式读取,读取的结果即是这个文本文件中的内容。
2.readAsBinaryString:该方法将文件读取为二进制字符串,通常我们将它传送到后端,后端可以通过这段字符串存储文件。
3.readAsDataURL:这是例子程序中用到的方法,该方法将文件读取为一段以 data: 开头的字符串,这段字符串的实质就是 Data URL,Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。
FileReader 处理事件:
onabort 中断时触发
onerror 出错时触发
onload 文件读取成功完成时触发
onloadend 读取完成触发,无论成功或失败
onloadstart 读取开始时触发
onprogress 读取中
文件一旦开始读取,无论成功或失败,实例的 result 属性都会被填充:
fr.onload = function() {
this.result;
};
评论