angular-file-upload实例的记录

由于工作环境下访问不了github，在可以访问的时候记录到博客上，(*^__^*) ！

  1 <!DOCTYPE html>
  2 <html lang="en" id="ng-app" ng-app="app">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>文件上传</title>
  6     <link rel="stylesheet" href="../../resources/ng-table/bootstrap.min.css"/>
  7     <script src="../../resources/ng-table/jquery-2.2.4.js"></script>
  8     <script src="../../resources/angular-1.5.2/angular.js"></script>
  9     <script src="../../resources/ng-table/angular-file-upload.js"></script>
 10     <script src="../../resources/angular-1.5.2/angular.js"></script>
 11     <script src="../../resources/ext/controllers.js"></script>
 12 </head>
 13 <!-- 1. nv-file-drop="" uploader="{Object}" options="{Object}" filters="{String}" -->
 14 <body ng-controller="AppController" nv-file-drop="" uploader="uploader" filters="queueLimit, customFilter">
 15 
 16 <div class="container">
 17 
 18     <div class="navbar navbar-default">
 19         <div class="navbar-header">
 20             <a class="navbar-brand" href="https://github.com/nervgh/angular-file-upload">Angular File Upload</a>
 21         </div>
 22         <div class="navbar-collapse collapse">
 23             <ul class="nav navbar-nav">
 24                 <li class="active dropdown">
 25                     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Demos <b class="caret"></b></a>
 26                     <ul class="dropdown-menu">
 27                         <li class="active"><a href="#">Simple example</a></li>
 28                         <li><a href="../image-preview">Uploads only images (with canvas preview)</a></li>
 29                         <li><a href="../without-bootstrap">Without bootstrap example</a></li>
 30                     </ul>
 31                 </li>
 32                 <li><a href="https://github.com/nervgh/angular-file-upload">View on Github</a></li>
 33                 <li><a href="https://raw.githubusercontent.com/nervgh/angular-file-upload/master/dist/angular-file-upload.min.js">Download</a></li>
 34             </ul>
 35         </div>
 36     </div>
 37 
 38     <div class="row">
 39 
 40         <div class="col-md-3">
 41 
 42             <h3>Select files</h3>
 43 
 44             <div ng-show="uploader.isHTML5">
 45                 <!-- 3. nv-file-over uploader="link" over-class="className" -->
 46                 <div class="well my-drop-zone" nv-file-over="" uploader="uploader">
 47                     Base drop zone
 48                 </div>
 49 
 50                 <!-- Example: nv-file-drop="" uploader="{Object}" options="{Object}" filters="{String}" -->
 51                 <div nv-file-drop="" uploader="uploader" options="{ url: '/foo' }">
 52                     <div nv-file-over="" uploader="uploader" over-class="another-file-over-class" class="well my-drop-zone">
 53                         Another drop zone with its own settings
 54                     </div>
 55                 </div>
 56             </div>
 57 
 58             <!-- Example: nv-file-select="" uploader="{Object}" options="{Object}" filters="{String}" -->
 59             Multiple
 60             <input type="file" nv-file-select="" uploader="uploader" multiple  /><br/>
 61 
 62             Single
 63             <input type="file" nv-file-select="" uploader="uploader" />
 64         </div>
 65 
 66         <div class="col-md-9" style="margin-bottom: 40px">
 67 
 68             <h3>Upload queue</h3>
 69             <p>Queue length: {{ uploader.queue.length }}</p>
 70 
 71             <table class="table">
 72                 <thead>
 73                 <tr>
 74                     <th width="50%">Name</th>
 75                     <th ng-show="uploader.isHTML5">Size</th>
 76                     <th ng-show="uploader.isHTML5">Progress</th>
 77                     <th>Status</th>
 78                     <th>Actions</th>
 79                 </tr>
 80                 </thead>
 81                 <tbody>
 82                 <tr ng-repeat="item in uploader.queue">
 83                     <td><strong>{{ item.file.name }}</strong></td>
 84                     <td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td>
 85                     <td ng-show="uploader.isHTML5">
 86                         <div class="progress" style="margin-bottom: 0;">
 87                             <div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div>
 88                         </div>
 89                     </td>
 90                     <td class="text-center">
 91                         <span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
 92                         <span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
 93                         <span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
 94                     </td>
 95                     <td nowrap>
 96                         <button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess">
 97                             <span class="glyphicon glyphicon-upload"></span> Upload
 98                         </button>
 99                         <button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()" ng-disabled="!item.isUploading">
100                             <span class="glyphicon glyphicon-ban-circle"></span> Cancel
101                         </button>
102                         <button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()">
103                             <span class="glyphicon glyphicon-trash"></span> Remove
104                         </button>
105                     </td>
106                 </tr>
107                 </tbody>
108             </table>
109 
110             <div>
111                 <div>
112                     Queue progress:
113                     <div class="progress" style="">
114                         <div class="progress-bar" role="progressbar" ng-style="{ 'width': uploader.progress + '%' }"></div>
115                     </div>
116                 </div>
117                 <button type="button" class="btn btn-success btn-s" ng-click="uploader.uploadAll()" ng-disabled="!uploader.getNotUploadedItems().length">
118                     <span class="glyphicon glyphicon-upload"></span> Upload all
119                 </button>
120                 <button type="button" class="btn btn-warning btn-s" ng-click="uploader.cancelAll()" ng-disabled="!uploader.isUploading">
121                     <span class="glyphicon glyphicon-ban-circle"></span> Cancel all
122                 </button>
123                 <button type="button" class="btn btn-danger btn-s" ng-click="uploader.clearQueue()" ng-disabled="!uploader.queue.length">
124                     <span class="glyphicon glyphicon-trash"></span> Remove all
125                 </button>
126             </div>
127 
128         </div>
129 
130     </div>
131 
132 </div>
133 
134 </body>
135 </html>
 1 'use strict';
 2 
 3 
 4 angular
 5 
 6 
 7     .module('app', ['angularFileUpload'])
 8 
 9 
10     .controller('AppController', ['$scope', 'FileUploader', function($scope, FileUploader) {
11         var uploader = $scope.uploader = new FileUploader({
12             url: 'upload.php'
13         });
14 
15         // FILTERS
16 
17         uploader.filters.push({
18             name: 'customFilter',
19             fn: function(item /*{File|FileLikeObject}*/, options) {
20                 return this.queue.length < 10;
21             }
22         });
23 
24         // CALLBACKS
25 
26         uploader.onWhenAddingFileFailed = function(item /*{File|FileLikeObject}*/, filter, options) {
27             console.info('onWhenAddingFileFailed', item, filter, options);
28         };
29         uploader.onAfterAddingFile = function(fileItem) {
30             console.info('onAfterAddingFile', fileItem);
31         };
32         uploader.onAfterAddingAll = function(addedFileItems) {
33             console.info('onAfterAddingAll', addedFileItems);
34         };
35         uploader.onBeforeUploadItem = function(item) {
36             console.info('onBeforeUploadItem', item);
37         };
38         uploader.onProgressItem = function(fileItem, progress) {
39             console.info('onProgressItem', fileItem, progress);
40         };
41         uploader.onProgressAll = function(progress) {
42             console.info('onProgressAll', progress);
43         };
44         uploader.onSuccessItem = function(fileItem, response, status, headers) {
45             console.info('onSuccessItem', fileItem, response, status, headers);
46         };
47         uploader.onErrorItem = function(fileItem, response, status, headers) {
48             console.info('onErrorItem', fileItem, response, status, headers);
49         };
50         uploader.onCancelItem = function(fileItem, response, status, headers) {
51             console.info('onCancelItem', fileItem, response, status, headers);
52         };
53         uploader.onCompleteItem = function(fileItem, response, status, headers) {
54             console.info('onCompleteItem', fileItem, response, status, headers);
55         };
56         uploader.onCompleteAll = function() {
57             console.info('onCompleteAll');
58         };
59 
60         console.info('uploader', uploader);
61     }]);

 

posted @ 2016-09-29 23:08  鐵手  阅读(387)  评论(0)    收藏  举报