0

danialfarid ライブラリ fileUpload を使用します。

https://github.com/danialfarid/angular-file-upload そして、「GitHub ページの使用法記事」と同じことを行いますが、ファイルを選択した後にエラーが発生しました:「Uncaught TypeError: プロパティ '長さ' を読み取れません」未定義の」であり、この未定義は $files.

これが私のコントローラーです：

$scope.onFileSelect = function($files) {
  console.log($files); // undefined
//$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];
  $scope.upload = $upload.upload({
    url: '/cards/avatar/save_from_disk', //upload.php script, node.js route, or servlet url
    data: {myObj: $scope.myModelObj},
    file: file,
  }).progress(function(evt) {
    console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
  }).success(function(data, status, headers, config) {
    // file is uploaded successfully
    console.log(data);
  });
}

};

そして私の見解では： 

<input type="file" title="" accept="image/*"  ng-file-select="onFileSelect($files)" class="upload" />
4

1 に答える 1

2

あなたが何かを逃した可能性が高いので、役に立つはずの実際の例を見てください :

JS:

var app = angular.module('plunker', ['angularFileUpload']);

app.controller('MainCtrl',['$scope', '$upload', function($scope, $upload) {


    $scope.onFileSelect = function($files) {


      console.log($files); // undefined
      //$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];
        $scope.upload = $upload.upload({
          url: '/cards/avatar/save_from_disk', //upload.php script, node.js route, or servlet url
          data: {
            myObj: $scope.myModelObj
          },
          file: file,
        }).progress(function(evt) {
          console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
        }).success(function(data, status, headers, config) {
          // file is uploaded successfully
          console.log(data);
        });
      }
    };
  }
]);

HTML:

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>

    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.22/angular.js" data-semver="1.2.22"></script>
      <script src="http://angular-file-upload.appspot.com/js/angular-file-upload.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">

    <input type="file" title="" accept="image/*"  ng-file-select="onFileSelect($files)" class="upload" />
  </body>

</html>
于 2014-09-03T10:37:13.497 に答える