发表于: 2017-05-17 23:36:37
1 951
今天完成的事情:
1、完成任务9静态页面的书写,
2、学习了FileReader对象的方法。
3、学习angular-file-upload上传控件。
明天计划的事情:
1、使用angular-file-upload控件完成图片上传和图片预览功能。
2、完成新增Ariticle。
遇到的问题:
1、input框的type=file的本身样式太丑,所以将其本身隐藏,利用label将其绑定在其他元素上,这样,就可以做成想要的样式。
2、对于新增Article和图片上传的接口都需要我们先登录,在这里怎么判断或是处理呢?
收获:
1、angular-file-upload这个插件定义了几个指令:nv-file-drop、nv-file-select、uploader
第一个支持文件脱拽选择,第二个是点击选择,uploader用于绑定在控制器中新建的upload对象。
2、FileReader接口提供了一个异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据。到目前为止,只有FF3.6+和Chrome6.0+实现了FileReader接口。
3、FileReader接口的方法
FileReader接口有4个方法,其中3个用来读取文件,另一个用来中断读取。无论读取成功或失败,方法并不会返回读取结果,这一结果存储在result属性中。
方法名 | 参数 | 描述 |
---|---|---|
readAsBinaryString | file | 将文件读取为二进制编码 |
readAsText | file,[encoding] | 将文件读取为文本 |
readAsDataURL | file | 将文件读取为DataURL |
abort | (none) | 终端读取操作 |
4、FileReader接口事件
FileReader接口包含了一套完整的事件模型,用于捕获读取文件时的状态。
事件 | 描述 |
onabort | 中断 |
onerror | 出错 |
onloadstart | 开始 |
onprogress | 正在读取 |
onload | 成功读取 |
onloadend | 读取完成,无论成功失败 |
评论