ng-file-upload套件好懶隨便貼

下載： https://github.com/danialfarid/ng-file-

前端處理

引用js


<script type="text/javascript" src="你js放的位置"></script> 【BundleConfig.cs】

html











































<body ng-app="fileUpload" ng-controller="MyCtrl">
    @*<h4>待上傳附件</h4>*@
    @*<div class="btn-section col-md-1 col-sm-4 col-xs-4">
        <button ngf-select="uploadFiles($files, $invalidFiles)" multiple
                accept=".pdf" ngf-max-height="1000" ngf-max-size="setFileSize()" class="btn btn-main col-xs-4" ng-disabled="cnaUpload()">
            瀏覽檔案
        </button>
    </div>*@
    @*<div class="btn-section col-md-1 col-sm-4 col-xs-4">
        <button id="btnUpd_D1" class="btn btn-main col-xs-4" style="display:inline;" ng-click="doUpload2(this)" ng-disabled="cnaUpload()">上傳</button>
    </div>
    <br><br>*@
    <b>
        附件清單:
        <div style="color:red;">(檔案大小限制為{{FILESIZE}}MB)</div>
    </b>

    <div ngf-drop ngf-select ng-model="files" class="drop-box" ng-show="files==[] || files.length==0"
         ngf-drag-over-class="'dragover'" ngf-multiple="true" ngf-allow-dir="true"
         accept="application/pdf"
         ngf-pattern="'application/pdf'">拖放檔案至此
    </div>

    <ul>
        <li ng-repeat="f in files" style="font:smaller;">
            <div style="display:inline-block;">
                <button style="background:rgba(0,0,0,0);border:unset;" ng-click="remove(this)" ng-show="f"><i class="glyphicon glyphicon-remove"></i></button>
                {{f.name}} {{f.$errorParam}}
                <span class="progress" ng-show="f.progress >= 0">
                    <div style="width:{{f.progress}}%"
                         ng-bind="f.progress + '%'"></div>
                </span>
            </div>
        </li>
        <li ng-repeat="f in errFiles" style="font:smaller;color:red;">
            <div style="display:inline-block;">
                <button style="background:rgba(0,0,0,0);border:unset;" ng-click="f=null" ng-show="f"><i class="glyphicon glyphicon-remove"></i></button>
                {{f.name}} {{f.$error}} {{f.$errorParam}}
            </div>
        </li>
    </ul>
    {{errorMsg}}
</body>

ngf-drop屬性為可透過拖曳檔案放置在該元素上觸發上傳
ngf-select屬性為可透過點擊元素後觸發上傳

資料處理






















































































































































































//-----------------------------------自定義事件與函式-----------------------------------
//【事件】--檔案上傳後 uploading2 ----------------------------------------
$scope.$on("uploading2", function (e, a_arg) {
    a_arg.files = $scope.files;
    a_arg.A_YEAR = $scope.searchData.ACD_YEAR;
    a_arg.A_AUNIT = $scope.searchData.ACD_AUNIT;
    a_arg.A_DEPT = $scope.searchData.ACD_DEPT;
    a_arg.A_FORMKIND = $scope.searchData.ACD_FORMKIND;
    a_arg.A_FORMNO = $scope.searchData.ACD_FORMNO;
});

//【事件】--檔案上傳後 uploaded2 ----------------------------------------
$scope.$on("uploaded2", function (e, a_arg) {
    $scope.files = "";
});

//【函式】控制上傳按鈕----------------------------------------
$scope.cnaUpload = function () {
    if ($scope.CANUPLOAD == "0") {
        return false;
    } else {
        return true;
    }
}

//【函式】控制檔案大小----------------------------------------
$scope.setFileSize = function () {
    if (!$scope || !$scope.FILESIZE) {
        return $scope.FILESIZE + "MB";
    } else {
        return $scope.FILESIZE + "MB";
    }


}
//【函式】多檔上傳UI----------------------------------------
$scope.uploadFiles = function (files, errFiles) {
    $scope.files = files;
    $scope.errFiles = errFiles;
    angular.forEach(files, function (file) {
        //file.upload = Upload.upload({
        //    //url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
        //    data: { file: file }
        //});

        //file.upload.then(function (response) {
        //    $timeout(function () {
        //        file.result = response.data;
        //    });
        //}, function (response) {
        //    if (response.status > 0)
        //        $scope.errorMsg = response.status + ': ' + response.data;
        //}, function (evt) {
        //    file.progress = Math.min(100, parseInt(100.0 *
        //        evt.loaded / evt.total));
        //});
    });
}

//【函式】檔案上傳----------------------------------------
$scope.doUpload2 = function ($scope) {
    //執行確定前事件 uploading ---------------
    var l_arg = new Object();
    l_arg.message = '';
    l_arg.cancel = false;
    l_arg.files = [];
    $scope.$broadcast('uploading2', l_arg);
    if (l_arg.cancel) {
        if (l_arg.message)
            swal(l_arg.message, '', 'warning').catch(swal.noop);
        return;
    }
    if (l_arg.files.length == 0) {
        /*請選擇檔案以供上傳！*/
        swal(ksijsLocalized.angular.doUploadMsg, '', 'warning').catch(swal.noop);
        return;
    }
    var l_fd = new FormData();
    l_fd.append('A_YEAR', l_arg.A_YEAR);
    l_fd.append('A_AUNIT', l_arg.A_AUNIT);
    l_fd.append('A_DEPT', l_arg.A_DEPT);
    l_fd.append('A_FORMKIND', l_arg.A_FORMKIND);
    l_fd.append('A_FORMNO', l_arg.A_FORMNO);
    angular.forEach(l_arg.files, function (a_fileName) {
        l_fd.append('file', a_fileName);
    });
    //
    $scope.loading = true;
    $http.post('/api/FileUpDownload/UpLoadFile', l_fd,
        {
            transformRequest: angular.identity,
            headers: { 'Content-Type': undefined }
        })
        .success(
            function (a_data) {
                $scope.loading = false;
                //取得執行批次處理結果 uploaded---------------
                var l_arg = new Object();
                l_arg.files = a_data;
                l_arg.isShowMessage = true;
                l_arg.message = '';
                $scope.$broadcast('uploaded2', l_arg);
                $scope.onBtnSearchClick();
                if (l_arg.message == '')
                    /*上傳作業完成！*/
                    l_arg.message = ksijsLocalized.angular.doUploadOKMsg;
                if (l_arg.isShowMessage)
                    swal(l_arg.message, '', 'success').catch(swal.noop);

            })
        .error(
            function (a_err) {
                $scope.loading = false;
                /*上傳作業失敗！*/
                $scope.error = ksijsLocalized.angular.doUploadErrorMsg + '\n' + a_err.data.ExceptionMessage;
                if (typeof a_err.data.ExceptionMessage != 'undefined') {
                    if ($scope.isShowErrorMessage) swal($scope.error, '', 'error').catch(swal.noop);
                }


            }
        );
};

//上傳前移除檔案
$scope.remove = function (e) {
    $scope.bufferFiles = new Array();
    for (var i = 0; i < $scope.files.length; i++) {
        if (e.f.name != $scope.files[i].name) {
            $scope.bufferFiles.push($scope.files[i]);
        }
    }
    if ($scope.bufferFiles.length > 0) {
        $scope.files = $scope.bufferFiles;
    }
    else {
        $scope.files = [];
    }
};

//【函式】刪除附件----------------------------------------
$scope.dataCreate = function (a_arg) {
    var l_delta = newDeltaQuOther();
    l_delta.name = "UPDATE_FILE_DETAIL";     // 指定那一個查詢
    // 查詢參數值
    l_delta.oldRow.A_YEAR = a_arg.oldRow["ACD_YEAR"]
    l_delta.oldRow.A_AUNIT = a_arg.oldRow["ACD_AUNIT"]
    l_delta.oldRow.A_DEPT = a_arg.oldRow["ACD_DEPT"]
    l_delta.oldRow.A_FORMKIND = a_arg.oldRow["ACD_FORMKIND"]
    l_delta.oldRow.A_FORMNO = a_arg.oldRow["ACD_FORMNO"]
    l_delta.oldRow.A_ATTACHMENT = a_arg.oldRow["ACD_ATTACHMENT"];
    $scope.doQuOther(l_delta).then(function (a_result) {
        swal("執行成功!", "", "success");
    },
        function (FailureMessage) {
            swal("執行失敗!", "", "error");
        })

};
//【函式】預覽或下載附件----------------------------------------
$scope.PdfView = function (Type) {
    if (Type == "1") {
        $scope.PDF_Viewer = "1";
    }
}

//【函式】預覽----------------------------------------
$scope.doPrint = function ($scope, printType, $event) {

}
//【cellTemplate】自訂檔案刪除按鈕----------------------------------------
function getCellTemplate_RemoveRowBatch() {
    return "<button class='btn btn-link cellBtn'  type='button' ng-click='doRemoveRowBatch($event)'  tabindex=\"-1\"><i class='glyphicon glyphicon-remove'></i></button>";
}
//【cellTemplate】自訂檔案下載按鈕----------------------------------------
function getCellTemplate_GetRow() {
        return "<button class='btn btn-link cellBtn'  type='button' ng-click='doGetRow($event)'   tabindex=\"-1\"><i class='glyphicon glyphicon-download-alt'></i></button>";
}
//【cellTemplate】自訂檔案預覽按鈕----------------------------------------
function getCellTemplate_GetRowView_PDF() {
    return "<button class='btn btn-link cellBtn'  type='button' ng-click='doPrint($event,\"PREVIEW\",$event);PdfView(\"1\");doGetRow($event);'   tabindex=\"-1\"><i class='glyphicon glyphicon-eye-open'></i></button>";
}

ng-file-upload套件 好懶 隨便貼

前端處理

引用js

html

資料處理

Read more

前端 View（基本）

angular-ui-tree套件

M檔+Q檔子視窗（只更改前端）

普通下拉 + 下拉連動 + 下拉刷新 + 多選下拉 + 相關應用

ng-file-upload套件好懶隨便貼