发表于: 2017-07-25 10:28:29
1 800
今天完成的事情:公司新增的三个图片上传服务以及表单的补全。
明天计划的事情:完成新增公司页面,编辑页面,以及职位页面。
遇到的问题:在插件上花费了大量的时间。
收获:图片上传插件的使用。
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" class="btn btn-primary">选择文件</label>
<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 class="progress">
<div class="progress-bar" ng-style="{'width':item.progress+'%'}" ng-bind="item.progress+'%'"></div>
</div>
</td>
<td>
<span ng-show="item.isSuccess" style="display: none;"><i class="glyphicon glyphicon-ok"></i></span>
<span ng-show="item.isCancel" style="display: none;"><i class="glyphicon glyphicon-ban-circle"></i></span>
<span ng-show="item.isError" style="display: none;"><i class="glyphicon glyphicon-remove"></i></span>
</td>
<td>
<button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess"><span class="glyphicon glyphicon-upload"></span>上传</button>
<button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()"><span class="glyphicon glyphicon-trash"></span>删除</button>
</td>
</tr>
评论