2017-03-28 6 views
1

私は角度を使用してローカルプロジェクトフォルダに保存上のトライアウトをと私は正しいコード、誰もがそれはあなたのソリューションにStackOverflowに角度jsを使用してローカル/プロジェクトフォルダに画像を保存/アップロードする方法は?

this.uploadFileToUrl = function(file, uploadUrl){ 
    var fd = new FormData(); 
    fd.append('file', file); 
    $http.post(uploadUrl, fd, { 
     transformRequest: angular.identity, 
     headers: {'Content-Type': undefined} 
    }) 
    .success(function(){ 
    }) 
    .error(function(){ 
    }); 
    } 

答えて

0

ねえKalithas KNと歓迎し、ここでより多くして、私のコードを私を助けて入れないで持っています。

ファイルアップロード用

、私が発見した次の角JSライブラリは、あなたは、私にとって最高の

https://github.com/danialfarid/ng-file-upload

アップロード方法は、あなたのテンプレートでは、この

$scope.upload = function (file) { 
    Upload.upload({ 
     url: 'upload/url', 
     data: {file: file, 'username': $scope.username} 
    }).then(function (resp) { 
     console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data); 
    }, function (resp) { 
     console.log('Error status: ' + resp.status); 
    }, function (evt) { 
     var progressPercentage = parseInt(100.0 * evt.loaded/evt.total); 
     console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name); 
    }); 
}; 

のようになります動作しますこのようなことをするでしょう

<div class="button" ngf-select="upload($file)">Upload on file select</div> 

また、ライブラリは、ドラッグ&ドロップファイルのアップロードを処理することができます私はいつも素敵な追加だと思う。

こちらがお役に立てば幸いです。より明確にする必要がある場合はお知らせください。

1

これはファイルをアップロードするためのコード例です。この例を使って試してみることができます。

<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> 

関連する問題