AngularJS上傳本地文件

我想上傳本地文件，但我知道我使用的http.get方法不受我的瀏覽器支持。有人知道我應該這樣做的另一種方式嗎？AngularJS上傳本地文件

<!doctype html> 
<html ng-app="demoApp"> 
    <head> 
    </head> 
    <body ng-controller="demoController"> 


    Filter City: <input ng-model="filterCity"> 
    <ul> 
    <li ng-repeat="office in offices | filter:filterCity"><u>{{ office.city }}</u> - {{office.name}}</li> 
    </ul> 



    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script> 
    <script> 
     var demoApp = angular.module("demoApp", []); 
     demoApp.controller("demoController", ['$scope', '$http', function($scope, $http) { 
     $scope.filterCity = ""; 
     $scope.offices = []; 

     $http.get('/angular-demo/data').success(function(data){ 
      $scope.offices = data; 
     }) 

     }]) 

    </script> 

    </body> 
</html>

來源

2015-06-22 Yih-Jen Ku

你可以使用ng upload module，有很多方法，但我更喜歡這個模塊。您可以使用原生指令custome像這樣的博客upload file

或本地

  app.directive('fileModel', ['$parse', function ($parse) { 
      return { 
      restrrict: '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]); 
        }) 
       }) 
      } 
      } 
      }]) 

      app.service('uploader', ['$http', function ($http) { 
      this.post = function (uploadUrl, data) { 
      var fd = new FormData(); 
      for (var key in data) 
       fd.append(key, data[key]); 
      $http.post(uploadUrl.fd, { 
       transformRequest: angular.identity, 
       headers: { 'Content-Type': undefined } 
      }) 
      } 
      }])

我的方式在你的商標達

 <form> 
     <input type="file" file-model="f.file"></input> 

     <button type="submit" class="btn btn-danger" ng-click="submit()">Upload</button> 

    </form>

控制器做$scope.f = {}; $scope.f.Id = 2; $scope.f.tr = 'hi'; $scope.submit = function() { var uploadUrl = 'https://angular-file-upload-cors-srv.appspot.com/upload'; uploader.post(uploadUrl, $scope.f.file); }

來源

2015-07-25 14:05:46

AngularJS上傳本地文件

回答

相關問題