angular1 使用webuploader上傳文件

開發項目使用中插件配置爲main.js

require.config({
    paths : {
        "jquery" : "lib/jquery-1.10.2.min",
        "angular" : "lib/angular/angular.min",
        "angularResource" : "lib/angular/angular-resource",
        "uiRoute" : "lib/ui-router/angular-ui-router.min",
        "angularSanitize" : "lib/angular/angular-sanitize.min",
        "angularCookies" : "lib/angular/angular-cookies",
        "angularLocale" : "lib/angular/i18n/angular-locale_zh-cn",
        "bootstrapUI" : "lib/angular/angularUI/ng-bootstrap/ui-bootstrap-tpls-0.12.1.min",
        "bootstrapJs" : "lib/bootstrap.min",
        "datetimepicker" : "lib/datetimepicker/js/bootstrap-datetimepicker.min",
        "datetimepickerCn" : "lib/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN",
        "jquery.zclip" : "lib/zclip/jquery.zclip.min",
        "jqueryUI" : "lib/jqueryui/jquery-ui-1.10.3.custom.min",
        "jqueryUITouchPunch" : "lib/jquery-ui-touch-punch/jquery.ui.touch-punch.min",
        "uislider" : "lib/uislider/slider",
        "dragscrollable" : "lib/dragscrollable/dragscrollable.min",
        "moment" : "lib/moment/moment",
        "websocket" : "lib/websocket",
        "md5" : "lib/md5/md5",
        "des" : "lib/crypto/tripledes",
        "crypto": "lib/crypto/core",
        "ecb" : "lib/crypto/mode-ecb",
        "lodash" : "lib/lodash/lodash.min",
        "postal" : "lib/postal/postal.min",
        "jcrop" : "lib/jcrop/jquery.Jcrop.min",
        "ngTable" : "lib/table/ng-table",
        "ueditor" : "lib/ueditor/ueditor.all",
        "ueditor.config" : "lib/ueditor/ueditor.config",
        "angularUEditor": "lib/angular-ueditor/angular-ueditor.min",
        "spin": "lib/spin.js/spin.min",
        "caret" : "lib/caret/jquery.caret",
        "pdfobject" : "lib/pdfobject/pdfobject",
        "webuploader": "lib/webuploader/webuploader.html5only",
        "IndexedDBShim": "lib/IndexedDBShim/IndexedDBShim",
        "jqueryIndexeddb": "lib/jquery-indexeddb/jquery.indexeddb",
        "uiSortable":"lib/ui-sortable/sortable",
        "xeditable":"lib/xeditable/xeditable",
        "qrcode" : "lib/jquery-qrcode/jquery.qrcode.min"
    },
    shim : {
        "angular" : {
            "deps" : ["jquery"],
            "exports" : "angular"
        },
        "angularLocale" : ["angular"],
        "uiRoute" : ["angular"],
        "angularResource" : ["angular"],
        "angularSanitize" : ["angular"],
        "angularCookies" : ["angular"],
        "bootstrapUI" : ["angular"],
        "bootstrapJs" : ["jquery"],
        "datetimepicker": ["jquery"],
        "datetimepickerCn": ["datetimepicker"],
        "jqueryUI": ["jquery"],
        "jqueryUITouchPunch": ["jqueryUI"],
        "uislider": ["angular", "jqueryUI", "jqueryUITouchPunch"],
        "moment": {"exports" : "moment"},
        'websocket': {'exports' : 'YGWebSocket'},
        'ecb':['des'],
        'jcrop': ['jquery'],
        'ngTable' : ["angular"],
        'ueditor': ['ueditor.config'],
        'angularUEditor': ["ueditor"],
        'webuploader': ['jquery'],
        'jqueryIndexeddb': ['jquery', 'IndexedDBShim'],
        'uiSortable':["angular","jqueryUI"],
        'dragscrollable': ['jquery'], 
        'xeditable' : ['angular']
    },
    priority: [
        "jquery",
        "angular"
    ]
});

require(["app"], function (app) {
    $(document).ready(function() {
        angular.bootstrap(document, [app.name]);
    });
});

View Code

"webuploader": "lib/webuploader/webuploader.html5only",是插件在項目中的地址。

1.編寫一個directives　　——　　Upload.js

define([
    'app',
    'jquery',
    'webuploader',
    'filters/byte'
], function (app, $, WebUploader) {
    'use strict';

    var deps = [ 'BaseService' ];

    function directive(BaseService) {
        return {
            scope: {
                uploadUrl: '@fcUpload',
                multiple: '@?',
                label: '@?',
                dndInfo: '@?',
                accept: '@?',
                uploaderOption: '=?'
            },
            templateUrl: 'views/common/upload/Upload.html',
            replace: true,
            link: function link($scope, elem) {

                $scope.files = [];
                $scope.progressStylies = {};

                $scope.uploadUrl = BaseService.restfulUrl + $scope.uploadUrl;
                var uploader = init($scope, elem);
                
                $scope.$on('$destroy', function scopeDestroy() {
                    uploader.destroy();
                });

                $scope.remove = function remove(file, index) {
                    doRemove($scope, uploader, file, index);
                };
            }
        };
    }
    
    function doRemove($scope, uploader, file, index) {
        $scope.files.splice(index, 1);
        $scope.progressStylies[file.id] = null;
        uploader.removeFile(file, true);
    }

    function init($scope, elem) {
        var btn = elem.find('.js-btn-pick');
        var dndContainer = elem.find('.js-dnd-container');
        
　　　　 //上傳類型限制保存對象
        var typelist = ["doc","docx","xls","xlsx","ppt","pptx","pdf"];
        
        var option = getOption($scope, btn, dndContainer);
        

        var uploader = WebUploader.create(option);

        // material design 的樣式設置有些古怪, 須要是`btn btn-` 開頭的纔會應用到一些樣式, 因此這裏把默認的webuploader-pick 放到後面去.
        var $realBtn = btn.find('.webuploader-pick').removeClass('webuploader-pick').addClass('btn btn-info webuploader-pick');
        setTimeout(function() {
            // 因爲有個 + 號的符號在前面, 致使默認的計算寬度的處理有些偏小, 這裏從新計算一下
            $realBtn.next().width($realBtn.outerWidth());
        }, 1000);

        if ($scope.dndInfo) {
            elem.find('.js-dnd-info').text($scope.dndInfo);
        } else if (option.accept && option.accept.title) {
            elem.find('.js-dnd-info').text('或將' + option.accept.title + ' 文件拖到虛線框內');
        }

        function tryRemainSingleFile() {
            if (!option.pick.multiple) {
                // 單選的, 直接把以前的文件清掉
                for (var i = $scope.files.length - 1; i >= 0; i--) {
                    doRemove($scope, uploader, $scope.files[i], i)
                }
            }
        }

        // 當有文件被添加進隊列的時候
        uploader.on('fileQueued', function fileQueued(file) {
        	//進行上傳類型判斷
        	if(typelist.indexOf(file.ext) != -1 && file.size <= 52428800)
            {
        		tryRemainSingleFile();
                
                $scope.files.push(file);
                $scope.$bus.publish({
                    channel: 'upload',
                    topic: 'fileQueued',
                    data: file
                });
                $scope.$apply();
            }else{
            	if(file.size > 52428800)
            	{
            		alert("選擇的格式文件超出限定大小"); 
            	} 
            	else{
            		alert("請選擇正確的格式文件");
            	}
            }
        });

        // 當有文件被移出隊列的時候
        uploader.on('fileDequeued', function fileDequeued(file) {
            $scope.$bus.publish({
                channel: 'upload',
                topic: 'fileDequeued',
                data: file
            });
        });

        uploader.on('error', function error(type) {
            $scope.$bus.publish({
                channel: 'upload',
                topic: 'error',
                data: type
            });
        });

        // 文件上傳過程當中建立進度條實時顯示。
        uploader.on('uploadProgress', function uploadProgress(file, percentage) {
            $scope.progressStylies[file.id] = $scope.progressStylies[file.id] || {};
            $scope.progressStylies[file.id].width = percentage * 100 + '%';
            $scope.$apply();
        });

        uploader.on('uploadSuccess', function uploadSuccess(file, response) {
            $scope.progressStylies[file.id].width = '100%';
            $scope.$bus.publish({
                channel: 'upload',
                topic: 'uploadSuccess',
                data: {
                    file: file,
                    response: response
                }
            });
            $scope.$apply();
        });

        uploader.on('uploadError', function uploadError(file, reason) {
            $scope.progressStylies[file.id].width = '0%';
            $scope.$bus.publish({
                channel: 'upload',
                topic: 'uploadError',
                data: {
                    file: file,
                    reason: reason
                }
            });
            $scope.$apply();
        });

        uploader.on('uploadFinished', function uploadFinished() {
            $scope.$bus.publish({
                channel: 'upload',
                topic: 'uploadFinished',
                data: {}
            });
        });

        $scope.$bus.subscribe({
            channel: 'upload',
            topic: 'start',
            callback: function startUpload() {
                uploader.upload();
            }
        });

        $scope.$bus.subscribe({
            channel: 'upload',
            topic: 'stop',
            callback: function stopUpload() {
                uploader.stop();
            }
        });

        return uploader;
    }
    
    function getOption($scope, btn, dnd) {
        var option = {
            // swf文件路徑
            swf: 'bower_components/fex-webuploader/dist/Uploader.swf',

            // 文件接收服務端。
            server: $scope.uploadUrl,
            // 選擇文件的按鈕。可選。
            // 內部根據當前運行是建立，多是input元素，也多是flash.
            pick: {
                id: btn,
                multiple: $scope.multiple == null || $scope.multiple === 'true',
                innerHTML: $scope.label || '<span class="glyphicon glyphicon-plus"></span> 選擇文件'
            },
            dnd: dnd,
            thumb: false,
            compress: false
        };
        if ($scope.accept) {
        	option.accept = {
                	title: 'Files',
                	extensions: 'jpg,jpeg,png,pdf',
                	mimeTypes: 'image/jpg,image/jpeg,image/png,application/pdf'
                };
        }
        
        if ($scope.accept === "Files") {
            option = $.extend({}, $scope.uploaderOption, option);
        }
        return option;
    }

    directive.$inject = deps;
    return app.lazy.directive('fcUpload', directive);
});
 

<div class="upload-container">
    <!--用來存放文件信息-->
    <div ng-if="files.length > 0" class="js-uploader-list">
        <table class="table table-striped">
            <tr ng-repeat="file in files track by file.id"
                ng-class="{ success: file.getStatus() === 'complete', danger: file.getStatus() === 'error', warning: file.getStatus() === 'interrupt' }">
                <td class="hide"></td>
                <td class="col-md-5 text-left">{{ file.name }}</td>
                <td class="col-md-2 text-left">{{ file.size | byte }}</td>
                <td class="col-md-5">
                    <div ng-class="{ active: file.getStatus() === 'progress' }" class="progress progress-striped">
                        <div class="progress-bar" ng-style="progressStylies[file.id]"></div>
                    </div>
                </td>
                <td class="cs-btn-cell"><a href ng-click="remove(file, $index)" class="close">&times;</a></td>
            </tr>
        </table>
    </div>
    <div class="upload-dnd-container js-dnd-container">
        <div class="js-btn-pick">選擇文件</div>
        <div class="upload-dnd-info js-dnd-info">或將文件拖到虛線框內</div>
    </div>
</div>

View Code

2.控制器導入directives

define(["app",
        "bootstrapJs", 
        "services/BaseService", 
        "services/TipsService",
        'directives/ImageCrop',
        'directives/alicebot/LearnSearchPicker',
        'directives/Upload'
],function (app) {

    var deps = ["$scope", "$state", "$stateParams", "AlicebotResource", "TipsService"];

    function controller($scope, $state, $stateParams, AlicebotResource, TipsService) {
        
        $scope.selectMenuId = $stateParams.selectMenuId;
        $scope.docList = [];
        var files = {};
        $scope.attachLength = 0;

        $scope.uploaderOption = {
            fileSingleSizeLimit: 50 * 1024 * 1024
        };
        
        
        
        function saveAttachs() {
            $scope.$bus.publish({
                channel: 'upload',
                topic: 'start',
                data: null
            });
        }

        $scope.$bus.subscribe({
            channel: 'upload',
            topic: 'fileQueued',
            callback: function fileQueued(file) {
                files[file.id] = file;

                $scope.attachLength++;
                if (!$scope.$$phase) {
                    $scope.$apply();
                }
            }
        });

        $scope.$bus.subscribe({
            channel: 'upload',
            topic: 'fileDequeued',
            callback: function fileDequeued(file) {
                delete files[file.id];

                $scope.attachLength--;
                if (!$scope.$$phase) {
                    $scope.$apply();
                }
            }
        });

        $scope.$bus.subscribe({
            channel: 'upload',
            topic: 'error',
            callback: function error(type) {
                if (type === 'F_EXCEED_SIZE') {
                    TipsService.show('請選擇50M如下的文件!');
                }
            }
        });
        
        $scope.$bus.subscribe({
            channel: 'upload',
            topic: 'uploadError',
            callback: function uploadError(file, reason) {
                var fileName = file.name;
                TipsService.show(fileName+'上傳失敗!');
            }
        });

        $scope.$bus.subscribe({
            channel: 'upload',
            topic: 'uploadSuccess',
            callback: function uploadSuccess(data) {
                if(data.response._raw !=undefined){
                    files[data.file.id].attachId = data.response._raw;
                }
            }
        });

        $scope.$bus.subscribe({
            channel: 'upload',
            topic: 'uploadFinished',
            callback: function uploadFinished() {
                //上傳成功 將信息保存到數據庫
                _.forOwn(files, function eachFile(value) {
                    
                    if(value.attachId !=undefined){
                        $scope.docList.push(value.attachId);
                        AlicebotResource.docsUpdate($scope.selectMenuId,value.attachId).success(function(data){
                             if(!data){
                                 TipsService.show(value.name+"上傳失敗");
                             }
                             if(_.size(files) == $scope.docList.length){
                                    $scope.cancel();
                             }
                        });
                    }
                });
            }
        });

        /**
         * 刪除附件資料
         */
        $scope.removeAttach = function removeAttach(file) {
            _.remove($scope.message.attachments, function removeCond(vo) {
                return vo.attachId === file.attachId;
            });
            _.remove($scope.message.attachments, function removeCond(attachId) {
                return attachId === file.attachId;
            });
        };
        
        $scope.save = function(){
            saveAttachs();
        }
        $scope.cancel= function(){
            $state.go('home.docmanagement');
        }


    }
    
    controller.$inject = deps;
    return app.lazy.controller("DocUploadController", controller);
});

View Code

<style>
    .col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-8,.col-md-10,.col-md-12{padding-left: 0;}
</style>
<div>
    <div class="clearfix col-m-l marginLeft0">
        <div class="form col-md-8 paddingLeft0">        

            <div class="form-group">
                <label>文檔資料</label>
                <div ng-if="message.attachments.length > 0">
                    <table class="table table-striped" ng-class="{ marginBottom0: attachLength > 0 }">
                        <tr ng-repeat="file in message.attachments track by file.attachId">
                            <td class="hide"></td>
                            <td class="col-md-5 text-left"><a ng-href="restful/fileUploadController/downFile?fileId={{ file.attachId }}">{{ file.attachName }}</a></td>
                            <td class="col-md-2 text-left">{{ file.attachSize | byte }}</td>
                            <td class="col-md-5"></td>
                            <td class="cs-btn-cell"><a href ng-click="removeAttach(file)" class="close">&times;</a></td>
                        </tr>
                    </table>
                </div>
                <div class="col-sm-12  thumbnail">
                    <div data-tabset class="tab-content" style="margin-top: 10px">                        
                        <div data-tab  data-heading="上傳附件" style="cursor: pointer;">
                            <div fc-upload="ccalice/docsUpload" uploader-option="uploaderOption" dnd-info="拖放到這裏上傳附件（每一個文件大小50M如下）"></div>
                        </div>
                    </div>
                </div>
            </div>
          
     <div class="form-group text-right">
                <button data-ng-click="save()" class="btn btn-primary">保存</button>
                <button data-ng-click="cancel()" class="btn btn-default">返回</button>
            </div>
        </div>
    </div>
</div>

View Code