关于angular上传文件的一些心得

来源:互联网 发布:ubuntu 忘记用户密码 编辑:程序博客网 时间:2024/06/07 17:32

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文件

1 0
原创粉丝点击