http://jsfiddle.net/danialfarid/s8kc7wg0/400/
HTML:
<div ng-app="fileUpload" ng-controller="MyCtrl">Username <input type="text" ng-model="username"><br/><br/> watching model: <div class="button" ngf-select ng-model="file" ngf-multiple="false">Select File</div> on file change multiple: <div class="button" ngf-select="upload($files)" ngf-multiple="true">Select File</div> Drop File: <div ngf-drop ngf-select ng-model="files" class="drop-box" ngf-drag-over-class="'dragover'" ngf-multiple="true" ngf-allow-dir="true" accept="image/*,application/pdf" ngf-pattern="'image/*,application/pdf'">Drop pdfs or images here or click to upload</div> <div ngf-no-file-drop>File Drag/Drop is not supported for this browser</div> Files: <ul> <li ng-repeat="f in files" style="font:smaller">{{f.name}} {{f.$error}} {{f.$errorParam}}</li> </ul> Upload Log: <pre>{{log}}</pre> </div> </div>
CSS
.button { -moz-appearance: button; /* Firefox */ -webkit-appearance: button; /* Safari and Chrome */ padding: 10px; margin: 10px; width: 70px; } .drop-box { background: #F8F8F8; border: 5px dashed #DDD; width: 200px; height: 65px; text-align: center; padding-top: 25px; margin: 10px; } .dragover { border: 5px dashed blue; }
//inject angular file upload directives and services.
var app = angular.module('fileUpload', ['ngFileUpload']);
app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) {
$scope.$watch('files', function () {
$scope.upload($scope.files);
});
$scope.$watch('file', function () {
if ($scope.file != null) {
$scope.files = [$scope.file];
}
});
$scope.log = '';
$scope.upload = function (files) {
if (files && files.length) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
if (!file.$error) {
Upload.upload({
url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
data: {
username: $scope.username,
file: file
}
}).then(function (resp) {
$timeout(function() {
$scope.log = 'file: ' +
resp.config.data.file.name +
', Response: ' + JSON.stringify(resp.data) +
'\n' + $scope.log;
});
}, null, function (evt) {
var progressPercentage = parseInt(100.0 *
evt.loaded / evt.total);
$scope.log = 'progress: ' + progressPercentage +
'% ' + evt.config.data.file.name + '\n' +
$scope.log;
});
}
}
}
};
}]);
浙公网安备 33010602011771号