angularjs file upload插件使用總結

時間 2019-11-11

標籤 angularjs file upload 插件使用總結欄目 AngularJS 简体版

原文原文鏈接

以前因爲項目須要，決定使用angularjs作前端開發，在前兩個項目中都有文件上傳的功能，由於是剛接觸angularjs，因此對一些模塊和模塊間的依賴不是很瞭解。都是由其餘大神搭好框架，我只作些簡單的填充。javascript

如今拿出些時間來研究一下。主要針對一些插件的用法，現總結一下（以file upload 爲例）：html

angular file upload.js 的第一行是前端

var angularFileUpload = angular.module('angularFileUpload', []);

這裏他定義了一個angular模塊，名稱是angularFileUpload，不依賴其餘模塊；html5

接下來java

angularFileUpload.service('$upload', ['$http', '$timeout', function($http, $timeout) {...})

在這個模塊上建立了一個服務，名稱是$upload，依賴'$http', '$timeout'兩個內置模塊（方法函數）；angularjs

在這個模塊的內部使用directive，建立了一些指令方法：數組

angularFileUpload.directive('ngFileSelect',[])//選擇

angularFileUpload.directive('ngFileDrop',[]);//拖放
等方法，具體尚未研究過；

分析完這個插件，接下來就是使用該插件了；

首先引入angularjs庫文件和相應插件

<script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular-file-upload/1.3.1/angular-file-upload.min.js"></script>

下面demoapp

<body ng-app="appName">
<div ng-controller="ctrlName">
    <div class="container">
        <input type="file" ng-file-select="onFileSelect($files)" multiple accept="image/*">
    </div>
</div>

關鍵是js的控制框架

//注入angularjs 模塊和服務
var app = angular.module('appName', ['angularFileUpload']);//建立並添加依賴（upload模塊名稱）
app.controller('ctrlName',[ '$scope', '$upload', function($scope, $upload) {//$upload是依賴的upload模塊的服務名稱module.service("$upload",[]）;
　　//這裏能夠調用依賴的(upload)模塊裏提供的方法

    $scope.onFileSelect = function($files) {    //$files:是已選文件的名稱、大小和類型的數組
        for (var i = 0; i < $files.length; i++) {      
            var file = $files[i];
            console.log(file);
            /*文件上傳函數*/
            $scope.upload = $upload.upload({
                url: 'server/upload/url', //上傳的url
                //method: 'POST' or 'PUT',
                //headers: {'header-key': 'header-value'},
                //withCredentials: true,
                data: {myObj: $scope.myModelObj},
                file: file, // or list of files ($files) for html5 only
                //fileName: 'doc.jpg' or ['1.jpg', '2.jpg', ...] // to modify the name of the file(s)
                // customize file formData name ('Content-Disposition'), server side file variable name. 
                //fileFormDataName: myFile, //or a list of names for multiple files (html5). Default is 'file' 
                // customize how data is added to formData. See #40#issuecomment-28612000 for sample code
                //formDataAppender: function(formData, key, val){}
            }).progress(function(evt) {//上傳進度
            
                console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
                
            }).success(function(data, status, headers, config) {
                // 文件上傳成功處理函數
                console.log(data);
                
            }).error(function(data, status, headers, config) {
                //失敗處理函數
                console.log('上傳失敗');
            });
        };
    };
}]);