0

ファイルのアップロードにnodejsを使用しています。以下のリンクのようなものを試しています。しかし、ものを投稿する方法がわかりません。ファイルと一緒に JSON データを投稿する必要があります。どのようにできるのか？

function myCtrl() {

   //an array of files selected
   $scope.files = [];

   //listen for the file selected event
   $scope.$on("fileSelected", function (event, args) {
      alert("file selected:")
      $scope.$apply(function () {            
         //add the file object to the scope's files collection
         $scope.files.push(args.file);
      });
   });

   //the save method
   $scope.save = function(filename) {
      $http({
         method: 'POST',
         url: "http://localhost:3000/uploadfile",
         headers: { 'Content-Type': false },
         //This method will allow us to change how the data is sent up to the
         //server for which we'll need to encapsulate the model data 
         //in 'FormData'
         transformRequest: function (data) {
            var formData = new FormData();
            formData.append("model", angular.toJson(data.model));
            for (var i = 0; i < data.files; i++) {
               //add each file to the form data and iteratively name them
               formData.append("file" + i, data.files[i]);
            }
            return formData;
         },
         //Create an object that contains the model and files which will 
         //be transformed in the above transformRequest method
         data: {files: $scope.files }
      }).
      success(function (data, status, headers, config) {
         alert("success!:"+JSON.stringify(data));
      }).
      error(function (data, status, headers, config) {
         alert("failed!:"+JSON.stringify(data));
      });
   };
}

これが私のAngularディレクティブ「ファイルアップロード」です。アップロードするために選択されたファイルを認識していました。

  angular.module('myApp', []).directive('file-upload', function () {
    return {
        scope: true,        //create a new scope
        link: function (scope, el, attrs) {
            el.bind('change', function (event) {
                var files = event.target.files;
                //iterate files since 'multiple' may be 
                        //specified on the element
                for (var i = 0;i<files.length;i++) {
                    //emit event upward
                    scope.$emit("fileSelected", { file: files[i] });
                }                                       
            });
        }
    };
});

私はsave（）を呼び出しているng-clickで使用しています。動作していません。何が問題ですか？

4

1 に答える 1

0

コードに ng-click が表示されません。正しい方法は、あなたがしているように見える「変更」イベントにバインドすることです。ディレクティブで探していることを行う軽量のangular-file-uploadライブラリを使用できます。IE9 は FormData をサポートしていないため、フラッシュ ポリフィルを使用して IE9 もサポートします。

<script src="angular.min.js"></script>
<script src="angular-file-upload.js"></script>

<div ng-controller="MyCtrl">
  <input type="file" ng-file-select="onFileSelect($files)" multiple>
</div>

JS:

//inject angular file upload directive.
angular.module('myApp', ['angularFileUpload']);

var MyCtrl = [ '$scope', '$http', function($scope, $http) {
  $scope.onFileSelect = function($files) {
    //$files: an array of files selected, each file has name, size, and type.
    for (var i = 0; i < $files.length; i++) {
      var $file = $files[i];
      $http.uploadFile({
        url: 'my/upload/url',
        file: $file
      }).then(function(data, status, headers, config) {
        // file is uploaded successfully
        console.log(data);
      }); 
    }
  }
}];
于 2013-08-24T16:45:54.230 に答える