发表于: 2017-06-28 23:23:24
1 847
今天完成的事情:state.go传参到Url成功,图片只是上传到了服务器,获取到了图片的网址
明天计划的事情:完善图片上传功能,增加上线下线
遇到的问题:对于文件上传这一块不熟悉,纠结上传图片要不要用插件,因为用插件也不太会,不用插件也不太会。
收获:学会了图片上传以及读取图片文件名
Angular-file-upload文件上传插件的使用
参考资料:
Github:https://github.com/nervgh/angular-file-upload
简单案例:http://nervgh.github.io/pages/angular-file-upload/examples/simple/
带图片预览案例:http://nervgh.github.io/pages/angular-file-upload/examples/image-preview/
一、上传多个图片,选择后手动触发上传:
(1)引用相关文件
复制代码
<link href="/assets/JS/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/assets/JS/plugins/jquery.min.js"></script>
<script type="text/javascript" src="/assets/JS/AngularJS/angular.js"></script>
<script type="text/javascript" src="/assets/JS/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/Assets/JS/AngularJS/angular-file-upload/angular-file-upload.min.js"></script>
复制代码
(2)Html代码
复制代码
<!-- 上传公司照片 -->
<div class="row" nv-file-drop="" uploader="uploaderPhotos" filters="queueLimit, customFilter">
<div class="col-sm-12 col-xs-12">
<div class="form-group form-group-xs ">
<label class="col-sm-1_5 col-xs-3 control-label ">公司照片:<br />(最多5张)</label>
<div class="col-sm-2 col-xs-12 " ng-repeat="item in uploaderPhotos.queue">
<div class=" ddh-panel2 ddh-width-full ddh-height-100" ng-show="uploaderPhotos.isHTML5" ng-thumb="{ file: item._file, height: 100 }"></div>
<input type="text" ng-model="item.file.Desc" class=" form-control-static" placeholder="请输入描述文本"/>
<a href="#" class="" ng-click="uploaderPhotos.funcRemoveItem(item)"><span class="glyphicon glyphicon-trash"></span></a>
<strong ng-bind="item.file.name"></strong>
</div>
<div class="col-sm-2 col-xs-12 ">
<input id='hiddenFilePhotos' type="file" nv-file-select="" uploader="uploaderPhotos" ng-show="" multiple />
<button class=" ddh-panel2 ddh-width-full ddh-height-100" onclick="javascript: $('#hiddenFilePhotos').click();" ng-show="uploaderPhotos.AllowAdd">点击添加<br />公司照片</button>
</div>
</div>
</div>
</div>
复制代码
(3)JS代码
复制代码
//在模块中引用
var app = angular.module('appMain', ['angularFileUpload']);
//在控制器中引用
app.controller('ctrlMain', function ($scope, $rootScope, $http, $window, $location, $log, FileUploader) {
//=======UpLoaderPhotos相关 Start======//
var uploaderPhotos = $scope.uploaderPhotos = new FileUploader({
url: "/HandlerApi.GetApiJson.tclywork?ApiPath=Test/Get"
});
$scope.uploaderPhotos.AllowAdd = true;//自己添加的,用于限制上传数量
$scope.uploaderPhotos.onAfterAddingFile = function (fileItem) {
while (this.queue.length > 5) {
this.removeFromQueue(0);
}
this.AllowAdd = (this.queue.length < 5);
console.log(this);
};
//用于在移除图片时,重新计算
$scope.uploaderPhotos.funcRemoveItem = function (fileItem) {
fileItem.remove();
this.AllowAdd = (this.queue.length < 5);
console.log(this);
};
//保存图片
$scope.funcSaveCompanyInfo = function () {
//先判断是否有未上传完成的图片,若有先传图片,否则直接上传表单数据
if (uploaderPhotos.getNotUploadedItems().length > 0) {
uploaderPhotos.uploadAll();
}
else {
}
}
//上传控件:回调响应:
$scope.uploaderPhotos.onBeforeUploadItem = function (item) {
item.formData = [{ Desc: item.file.Desc }];//上传前,添加描述文本
console.log("onBeforeUploadItem:");
console.log(item.formData);
}
//上传控件:回调响应:
$scope.uploaderPhotos.onCompleteItem = function (item,response,status,headers) {
console.log("onCompleteItem " + JSON.stringify(response));
//
if (response.code == "200") {
$scope.modelPosition.Images += response.data.id;
}
console.log($scope.modelPosition.Images);
};
//上传控件:回调响应:
$scope.uploaderPhotos.onCompleteAll = function () {
console.log("CompleteAll");
funcSaveCompanyInfoFormData();
}
}
评论