Мы предоставляем пример загрузки файла. Для разработки этого приложения мы использовали HTML, CSS и AngularJS. В следующем примере показано, как загрузить файл с помощью AngularJS.
<html> <head> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script> </head> <body ng-app = "myApp"> <div ng-controller = "myCtrl"> <input type = "file" file-model = "myFile"/> <button ng-click = "uploadFile()">upload me</button> </div> <script> var myApp = angular.module('myApp', []); myApp.directive('fileModel', ['$parse', function ($parse) { return { restrict: 'A', link: function(scope, element, attrs) { var model = $parse(attrs.fileModel); var modelSetter = model.assign; element.bind('change', function() { scope.$apply(function() { modelSetter(scope, element[0].files[0]); }); }); } }; }]); myApp.service('fileUpload', ['$https:', function ($https🙂 { this.uploadFileToUrl = function(file, uploadUrl) { var fd = new FormData(); fd.append('file', file); $https:.post(uploadUrl, fd, { transformRequest: angular.identity, headers: {'Content-Type': undefined} }) .success(function() { }) .error(function() { }); } }]); myApp.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload) { $scope.uploadFile = function() { var file = $scope.myFile; console.log('file is ' ); console.dir(file); var uploadUrl = "/fileUpload"; fileUpload.uploadFileToUrl(file, uploadUrl); }; }]); </script> </body> </html>
Результат
Откройте сохраненный файл кода выше в веб-браузере. Смотрите результат.