English 中文(简体)
AngularJS Tutorial

AngularJS Applications

AngularJS Useful Resources

Selected Reading

AngularJS - Upload File
  • 时间：2024-12-22

AngularJS - Upload File

Previous Page Next Page  

We are providing an example of Upload File. To develop this app, we have used HTML, CSS and AngularJS. Following example shows about how to upload the file using AngularJS.

<html>
   <head>
      <script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.3.14/angular.min.js">
      </script>
   </head>
   
   <body ng-app = "myApp">
	
      <span ng-controller = "myCtrl">
         <input type = "file" file-model = "myFile"/>
         <button ng-cpck = "uploadFile()">upload me</button>
      </span>
      
      <script>
         var myApp = angular.module( myApp , []);
         
         myApp.directive( fileModel , [ $parse , function ($parse) {
            return {
               restrict:  A ,
               pnk: 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>

Result

Open above saved code file in a web browser. See the result.