发表于: 2017-03-30 16:53:59
2 1340
今日完成:
1 图片上传的预览图。input type=file的.files属性,是表单内文件的信息。
FileReader,浏览器的一个接口,功能是读取文件到内存,是个构造函数,将其实例化后获得其方法和事件。。
它的事件:,支持进度条。
http://blog.csdn.net/zk437092645/article/details/8745647
他的方法:
.readAsDataURL(file)----将文件读取为DataURL。(供预览,转换为base64编码)
.readAsBinaryString(file)----将文件读取为二进制编码。(供上传)
.readAsText(file,(encoding))----将文件读取为文本。
.abort()----中断读取。
》》读取的文件被保存到.result属性中。但是读取过程需要时间,所以要用它的.onload事件来触发,才能取到.result的值。
之后就可以将其展示在网页上。或者用来上传。
$scope.reader.onload=function () {
$scope.preview=$scope.reader.result;//预览
document.getElementById("img").src=$scope.preview;}
》base64编码的png图片:格式:,可以直接用来作为图片的src。
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAbQAAACbCAYAAAAKuW4RAAAAAXNSR…
明日计划:
1 小课堂,有限状态机
2 任务9的图片上传,争取完成,然后再改用ng-file-uploader。
问题:
preview变量是base64格式的图片,在这里绑定是失败的。怎样做绑定呢?
<img ng-src={{preview}}>
收获:
完成了图片预览效果,熟悉了浏览器的FileReader对象(API)。
评论