HTML文档
<div style="height:250px;display:inline;">
<div style="position:relative;display: inherit;"><div class="btn btn-primary btn-radius">点击上传</div>
<input type="file" nv-file-select="" uploader="uploader" multiple class="fileUpControl" />
</div>
<div ng-repeat="item in uploader.queue" style="display: inherit;margin-left: 15px;">
{{ item.file.name }}
<span ng-click="item.remove()" class="glyphicon glyphicon-trash" style="color:red;cursor:pointer;"></span>
</div>
</div>
js重要文件:
$scope.vm = {};
//接收全局状态
$scope.$bus.subscribe({
channel: 'task',
topic: 'task.upload',
callback: function (data, envelope) {
$scope.vm.taskStatus = data.taskStatus;
$scope.vm.taskId = data.taskId;
$scope.serverUrl= "/RSSupervise/uploadFile.do?taskId=" + $scope.vm.taskId +"&taskStep=" + $scope.vm.taskStatus;
}
});
fileUploadService.setController($scope);
var uploader = $scope.uploader = new FileUploader({
url: ''
});
console.log("uploader is ready!");
uploader.filters.push({
name: 'customFilter',
fn: function(item /*{File|FileLikeObject}*/ , options) {
return this.queue.length < 10;
}
});
uploader.onWhenAddingFileFailed = function(item /*{File|FileLikeObject}*/ , filter, options) {
jAlert("文件" + fileItem.file.name + "上传失败!", "提示");
uploader.removeFromQueue(fileItem);
console.info('添加文件失败', item, filter, options);
};
uploader.onAfterAddingFile = function(fileItem) {
fileItem.url = $scope.serverUrl;
console.info('添加一个文件', fileItem.file.name);
};
uploader.onAfterAddingAll = function(addedFileItems) {
uploader.uploadAll();
console.info('上传成功Path:' + addedFileItems[0].url);
};
// uploader.onBeforeUploadItem = function(item) {
// console.info('onBeforeUploadItem', item);
// };
// uploader.onProgressItem = function(fileItem, progress) {
// console.info('上传一个文件中...', fileItem, progress);
// };
// uploader.onProgressAll = function(progress) {
// console.info('上传所有文件中...', progress);
// };
// uploader.onSuccessItem = function(fileItem, response, status, headers) {
// console.info('上传成功的文件', fileItem, response, status, headers);
// };
uploader.onErrorItem = function(fileItem, response, status, headers) {
jAlert("文件" + fileItem.file.name + "上传失败!", "提示");
uploader.removeFromQueue(fileItem);
console.info('上传失败的文件', fileItem, response, status, headers);
};
// uploader.onCancelItem = function(fileItem, response, status, headers) {
// console.info('取消上传的文件', fileItem, response, status, headers);
// };
// uploader.onCompleteItem = function(fileItem, response, status, headers) {
// console.info('完成上传的文件', fileItem, response, status, headers);
// };
// uploader.onCompleteAll = function() {
// console.info('所有文件上传完成');
// };
// console.info('上传文件插件', uploader);
其中$scope.serverUrl 是上传的地址跟一些附带参数,我也是一个新手,又哪儿不对的地方希望大家指导一下,首先还得引入angular-file-upload.min.js文件