发表于： 2017-05-11 23:32:18
1 948
今天完成的事情
a.小课堂的准备，ppt，以及demon文件
明天计划做的事情
a.准备进复盘项目审核的PPT
b.接着去改善自己的js基础方面的东西
以下是小课堂部分：
1.背景介绍
在js-task-9内，我们需要实现一个将本地图片上传的功能，并且能够进行预览并且将图片的一些属性展示出来。
为了实现这个功能，我们利用所学的angular知识来做一个功能比较简单的图片上传组件。
2.知识剖析
1.基础知识
关于指令，因为我们是有直接讲指令的小课堂的，所以这里就简单说一下。
1.angular指令本质上就是AngularJs扩展具有自定义功能的html元素的途径。
2.内置指令，打包在AngularJs内部的指令，所有内部指令的命名空间 都使用ng作为前缀，所以在写自定义指令的时候，避免用ng作为指令命名的前缀。
3.创建指令的方式有四种，在指令里用 restrict属性控制
E | 元素 |
A | 属性 这个是比较推荐的方式 |
C | css类 |
M | 注释 |
4.向指令中传递数据，用template属性
template: '<a href="{{ myUrl }}">{{ myLinkText }}</a>'
templateurl: 'index.html'
第一种是直接把对应的字符串输入给指令
第二种是适合指令部分html比较复杂的情况，可以把指令的内容写到一个html文件内，通过url传给指令
2.组件分析
功能：
1.点击按钮上传图片
2.图片能在本地预览
3.上传后能够在本地预览，显示图片信息，显示上传进度
4.点击上传按钮上传到服务器
5.点击删除按钮，删除图片，图片信息一并消失，有个弹框
3.常见问题
怎么实现上述功能
4.解决方案
a.文件结构
如下所示，因为比较简单，js文件就写在一个app.js里面了。upfile里面写的是指令的模板
b.创建指令
指令创建
restrict: 'A',
templateUrl: 'upfile.html',
在index.html里面写的指令
<body>
<div upload></div>
</body>
指令模板
<!--选择图片按钮-->
<form>
<label for="picUpLoad" class="btn chose-btn">选择图片</label>
<input type="file" id="picUpLoad" style="display:none;">
</form>
<!--图片预览部分-->
<img alt="图片预览" ng-src="{{imgUrl}}" class="img-preview">
<!--展示部分：名称、大小、进度条、操作按钮-->
<section class="up-info">
<section class="up-info-title">
<div class="name">图片名称</div>
<div class="size">图片大小</div>
<div class="progress">上传进度</div>
<div class="state">上传状态</div>
<div class="operate">操作</div>
</section>
<section class="up-info-data" ng-show="change == 1">
<div class="name" ng-bind="name"></div>
<div class="size">
<span ng-bind="size/1024/1024 | number : 2"></span>Mb
</div>
<div class="progress">
<progress max="100" value="{{progress}}" class="progress-bar"></progress>
</div>
<div class="state"><span ng-show="progress == 100">成功</span></div>
<div class="operate">
<button id="up-btn" class="btn operate-btn" ng-disabled="progress == 100">上传</button>
<button id="delete-btn" class="btn operate-btn" >删除</button>
</div>
</section>
</section>
c,创建服务，服务里面是操作数据的逻辑
定义一些私有变量，然后定义一些方法，在link函数里面调用这些函数，就可以获得相应的数据
//服务
upFileApp.factory("fileFactory",function ($http) {
var service = {};
var _file = '';
var _name = '';
var _size = '';
var baseUrl = '/carrots-admin-ajax/a/u/img/task';
var _picUrl = '';
var _message = '';
service.getPic = function (img) {
_file = event.target.files[0];
return _file;
};
service.getName = function (img) {
_name = event.target.files[0].name;
return _name;
};
service.getSize = function (img) {
_size = event.target.files[0].size;
return _size;
};
service.getUrl = function (_file,callback) {
var img = new FileReader();
img.onload = function(pic) {
callback(pic.target.result)
};
img.readAsDataURL(_file);
}
service.getProgress = function (_file,callback) {
var formdata = new FormData(_file);
formdata.append('file',_file);
$http({
method: 'POST',
url: baseUrl,
data:formdata,
headers: {
'Content-Type':undefined
},
uploadEventHandlers: {
progress:function(_file) {
callback(Math.round(_file.loaded * 100 / _file.total));
}
}
})
.then (function(response) {
_message = response.data.code;
})
}
return service;
})
d.link函数
在link函数里面操作dom，定义三个事件，一个监控input的change事件，两个对应上传和删除按钮的click事件
link: function (scope,element,attrs) {
$("#picUpLoad").bind('change', function(event) {
scope.change = 1; // change发生
scope.progress = 0;
scope.file = fileFactory.getPic(event);
scope.name = fileFactory.getName(event);
scope.size = fileFactory.getSize(event);
fileFactory.getUrl(scope.file,function(result){
scope.$apply(function () {
scope.imgUrl = result;
})
})
})
$("#up-btn").bind('click',function() {
fileFactory.getProgress(scope.file,function(result) {
scope.progress = result;
})
})
$("#delete-btn").bind('click',function (){
var del = confirm('是否要删除');
if (del) {
scope.change = 0;
scope.progress = 0;
scope.$apply();
}
})
}
5.编码实战
6.扩展思考
a.还应该添加一些什么功能
我觉得应该添加一个对于file类型的判定，在上传的不是图片格式的文件时报错
7.参考文献
AngularJS 之 Factory vs Service vs Provider
angular上传获取图片的directive指令
8.更多讨论
怎样优化这个组件，增强组件的复用性，使之可以应用到项目中。
收获：
收获比较多的是对于指令和服务的理解吧，感觉还是要多写代码，运行起来的东西，有助于理解。
返回列表
评论