Загрузка файла Angularjs не работает ($files не определен)

Я использую библиотеку danialfarid fileUpload.

https://github.com/danialfarid/angular-file-upload И я делаю то же самое такие вещи, как в «Статье об использовании на странице GitHub», но у меня есть ошибка после того, как я выбрал файл: «Uncaught TypeError: Cannot read property 'length' of undefined», и это неопределенное значение равно $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" />

javascript file-upload angularjs angular-file-upload
person thisninja    schedule 03.09.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Скорее всего, вы что-то пропустили, пожалуйста, посмотрите рабочий пример, который должен помочь: http://plnkr.co/edit/fbALEktGuyDY2CNUrwrL?p=preview

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="[email protected]" 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>
person sylwester    schedule 03.09.2014
comment
Ага, точно так же. Парадокс в том, что мой пример отлично работает на локальном диске. - person thisninja; 03.09.2014
comment
Вы минимизируете свои файлы js на живом сервере? - person sylwester; 03.09.2014
comment
Да, я минимизирую код для сервера. А также используйте запись массива для зависимостей. Я решил проблему. :facepalm: У меня есть две директивы ngFileSelect, и последняя (из другого модуля) переопределяет первую. - person thisninja; 03.09.2014