这里是修真院前端小课堂，每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能，本篇分享的是：
【怎么将图片上传封装成指令？ 】
1.背景介绍
在js-task-9内，我们需要实现一个将本地图片上传的功能，并且能够进行预览并且将图片的一些属性展示出来。
为了实现这个功能，我们利用所学的angular知识来做一个功能比较简单的图片上传组件。
2.知识剖析
指令：
1.angular指令本质上就是AngularJs扩展具有自定义功能的html元素的途径。
2.内置指令，打包在AngularJs内部的指令，所有内部指令的命名空间 都使用ng作为前缀，3.所以在写自定义指令的时候，避免用ng作为指令命名的前缀。
4.创建指令的方式有四种，在指令里用 restrict属性控制:E:元素A:属性(这个是比较推荐的方式)C:css类M:注释
5.向指令中传递数据，用template属性
组件功能：
1.点击按钮上传图片
2.图片能在本地预览
3.显示图片信息，显示上传进度
4.点击上传按钮上传到服务器
5.点击删除按钮，删除。
6.上传按钮只能按一次
</br>
3.常见问题
如何实现组件?
</br>
4.解决方案
</br>
5.编码实战
html模板：
<script type="text/ng-template" id="imgLoad.html">
<div class="box">
<form id="form" enctype="multipart/form-data">
<label for="imgFile">上传:</label>
<label for="imgFile" class="btn btn-primary btn-md" ng-disabled="upDisabled">选择图片</label><span>图片最大为2000000byte(约2MB)</span>
<input type="file" id="imgFile">
</form>
<table class="table">
<thead>
<tr>
<th>名字</th>
<th>大小</th>
<th>进度</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody >
<tr ng-if="hasImg">
<td>{{name}}</td>
<td>{{size}}</td>
<td><progress id="progress" ng-value="progress" max="100"></progress><span>{{progress}}</span></td>
<td>{{status}}</td>
<td>
<div class="btn-group">
<button class='btn btn-success' ng-disabled="upDisabled" ng-click="upLoad()">上传</button>
<button class="btn btn-danger" ng-click="delete()">删除</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</script>
自定义指令：
myApp.directive('imgUpload', function ($http) { return { restrict: 'AEC', replace: true, transclude: true, templateUrl: "imgLoad.html", link: function (scope, ele, attr) {
scope.imgFile = document.getElementById('imgFile');
scope.img = document.getElementById('img');
scope.progress='';
scope.imgFile.onchange = function () { if(scope.imgFile.files[0].size>=2000000){
alert('图片大小超限~')
}else{ var reader = new FileReader();
reader.readAsDataURL(scope.imgFile.files[0]);
scope.$apply(function () {
scope.hasImg = scope.imgFile.files[0];
scope.name = scope.imgFile.files[0].name;
scope.size = scope.imgFile.files[0].size > 1024 * 1024 ? (scope.imgFile.files[0].size / 1024 / 1024).toFixed(2) + 'MB' : (scope.imgFile.files[0].size / 1024).toFixed(2) + 'KB';
})
}
};
scope.delete = function () {
scope.img.src = '';
scope.hasImg = false;
scope.upDisabled = false;
};
scope.upLoad = function () {
$http({ method: 'post', url: '/carrots-admin-ajax/a/u/img/task', headers: {'content-type': undefined}, uploadEventHandlers:{ progress: function(e) { if (e.lengthComputable) {
scope.progress = Math.round(e.loaded * 100 / e.total);
}
}
}, transformRequest: function () { var formData = new FormData();
formData.append('file', scope.hasImg); return formData;
}
}).then(function successCallback(res) {
scope.status = res.data.message;
scope.src = res.data.data.url;
scope.upDisabled = true;
},function errorCallback(res) {
scope.status = res.data.message;
scope.upDisabled = true;
})
}
}
};
});
</br>
6.扩展思考
还应该添加一些什么功能?
还应该添加上传的文件是否是图片的验证。
</br>
7.参考文献
$http服务
FileReader : EventTarget
文件和二进制数据的操作
</br>
8.更多讨论
1.图片上传的document.getElementById('file').files为何是一个数组？
图片上传可以一次上传多个文件，故files对象是一个数组。
2.如何同时上传多个文件？
input中添加multiple="multiple"属性，则可一次性选择多个文件，document.getElementById('file').files中有多个file文件.
3.当我们再次选择文件上传时，files数组会发生什么？
当我们再次选择文件上传时，此files数组会被覆盖并非添加文件到此数组中。
</br>
更多内容，可以加入IT交流群565734203与大家一起讨论交流
这里是技能树·IT修真院：https://www.jnshu.com，初学者转行到互联网的聚集地