做者更新得彷佛挺勤快的,先預覽下代碼:javascript
<script src="angular.min.js"></script> <!-- shim is needed to support non-HTML5 FormData browsers (IE8-9)--> <script src="angular-file-upload-shim.min.js"></script> <script src="angular-file-upload.min.js"></script> <div ng-app="fileUpload" ng-controller="MyCtrl"> watching model: <div class="button" ng-file-select ng-model="files">Upload using model $watch</div> <div class="button" ng-file-select ng-file-change="upload($files)">Upload on file change</div> Drop File: <div ng-file-drop ng-model="files" class="drop-box" drag-over-class="dragover" ng-multiple="true" allow-dir="true" accept=".jpg,.png,.pdf">Drop Images or PDFs files here</div> <div ng-no-file-drop>File Drag/Drop is not supported for this browser</div> </div> ``` ```javascript //inject angular file upload directives and services. var app = angular.module('fileUpload', ['angularFileUpload']); app.controller('MyCtrl', ['$scope', '$upload', function ($scope, $upload) { $scope.$watch('files', function () { $scope.upload($scope.files); }); $scope.upload = function (files) { if (files && files.length) { for (var i = 0; i < files.length; i++) { var file = files[i]; $upload.upload({ url: 'upload/url', fields: {'username': $scope.username}, file: file }).progress(function (evt) { var progressPercentage = parseInt(100.0 * evt.loaded / evt.total); console.log('progress: ' + progressPercentage + '% ' + evt.config.file.name); }).success(function (data, status, headers, config) { console.log('file ' + config.file.name + 'uploaded. Response: ' + data); }); } } }; }]); ``` 詳細用法請移步至做者的GitHub頁面:[https://github.com/danialfarid/ng-file-upload](https://github.com/danialfarid/ng-file-upload)