Javascript Angularjs文件上传不'；t工作（$files未定义）_Javascript_Angularjs_File Upload_Angular File Upload

Javascript Angularjs文件上传不'；t工作（$files未定义）

javascript angularjs file-upload

Javascript Angularjs文件上传不'；t工作（$files未定义）,javascript,angularjs,file-upload,angular-file-upload,Javascript,Angularjs,File Upload,Angular File Upload,我使用Danielfarid库文件上传我在“GitHub页面上的用法文章”中也做了类似的事情，但在我选择文件后出现了一个错误：“UncaughtTypeError:Cannotreadproperty'length'of undefined”，这个undefined是$files 这是我的控制器： $scope.onFileSelect=函数（$files）{ console.log（$files）；//未定义 //$files：选定文件的数组，每个文件都有名称、大小和类型。对于（变量i=

我使用Danielfarid库文件上传

我在“GitHub页面上的用法文章”中也做了类似的事情，但在我选择文件后出现了一个错误：“UncaughtTypeError:Cannotreadproperty'length'of undefined”，这个undefined是$files

这是我的控制器：

$scope.onFileSelect=函数（$files）{
console.log（$files）；//未定义
//$files：选定文件的数组，每个文件都有名称、大小和类型。
对于（变量i=0；i<$files.length；i++）{
var file=$files[i]；
$scope.upload=$upload.upload({
url:'/cards/avatar/save_from_disk'、//upload.php脚本、node.js路由或servlet url
数据：{myObj:$scope.myModelObj}，
档案：档案，
}).进度（功能（evt）{
log（'percent:'+parseInt（100.0*evt.loaded/evt.total））；
}).success（函数（数据、状态、标题、配置）{
//文件已成功上载
控制台日志（数据）；
});
}

})

在我看来：

更可能的情况是，您遗漏了一些内容，请参阅工作示例，这些示例应该会有所帮助：

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);
        });
      }
    };
  }
]);

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

var-app=angular.module（'plunker'，['angularFileUpload']）；
app.controller（'MainCtrl'，['$scope'，'$upload'，函数（$scope，$upload）{
$scope.onFileSelect=函数（$files）{
console.log（$files）；//未定义
//$files：选定文件的数组，每个文件都有名称、大小和类型。
对于（变量i=0；i<$files.length；i++）{
var file=$files[i]；
$scope.upload=$upload.upload({
url:'/cards/avatar/save_from_disk'、//upload.php脚本、node.js路由或servlet url
数据：{
myObj:$scope.myModelObj
},
档案：档案，
}).进度（功能（evt）{
log（'percent:'+parseInt（100.0*evt.loaded/evt.total））；
}).success（函数（数据、状态、标题、配置）{
//文件已成功上载
控制台日志（数据）；
});
}
};
}
]);

HTML:

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);
        });
      }
    };
  }
]);

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


安古拉斯普朗克
文件。写（“”）；

是的，还是一样。矛盾的是，我的示例在本地磁盘上工作得非常好。您是否在live server上缩小js文件？是的，我缩小了服务器的代码。还可以对依赖项使用数组表示法。我解决了这个问题facepalm：我有两个ngFileSelect指令，最后一个（来自其他模块）指令覆盖第一个指令。