发表于: 2017-07-24 23:38:42
1 819
今天完成的事情:公司新增的三个图片上传服务以及表单的补全。
明天计划的事情:完成新增公司页面,编辑页面,以及职位页面。
遇到的问题:在插件上花费了大量的时间。
收获:图片上传插件的使用。
github地址:https://github.com/nervgh/angular-file-upload;
官方api:https://github.com/nervgh/angular-file-upload/wiki/Module-API;
使用方法:
//图片上传配置
var uploader = vm.uploader = new FileUploader({
url: "/carrots-admin-ajax/a/u/img/task",
queueLimit: 1
});
uploader.onAfterAddingFile = function(fileItem) {
vm.fileItem = fileItem._file;
};
uploader.onSuccessItem = function(fileItem, response, status, headers) {
vm.logo = response.data.url;
};
<label for="choosePicture"
<input id="choosePicture" type="file" nv-file-select uploader="vm.uploader">
<img style="max-height: 150px;max-width: 600px;" ng-src="{{vm.logo}}" alt="配图预览">
<tr ng-repeat="item in vm.uploader.queue">
<td ng-bind="item.file.name"></td>
<td>
<span ng-bind="item.file.size/1024/1024|number:2"></span>MB
</td>
<td>
<div
<div "{'width':item.progress+'%'}" ng-bind="item.progress+'%'"></div>
</div>
</td>
<td>
<span ng-show="item.isSuccess" style="display: none;"><i
<span ng-show="item.isCancel" style="display: none;"><i
<span ng-show="item.isError" style="display: none;"><i
</td>
<td>
<button type="button" "item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess"><span
<button type="button" "item.remove()"><span
</td>
</tr>
评论