无法从模态元素获取 $file，Angular JS

Question

我正在使用提示用户 select 将文件上传到网站的模态元素，但我似乎无法获取该文件。这是我的 HTML:

 <div class="modal-section align-left">
      <input type="file" accept='application/pdf' ng-file-select="onFileSelect($files)" file></input>
 </div>

这里是 javascript 我正在尝试使用它：

$scope.onFileSelect = ($file);

看起来这应该是一个足够简单的任务，但有些东西没有连接，我不确定是什么。我不断收到“$file is not defined”错误。

任何想法都会有所帮助！谢谢！

刚刚意识到我还应该提到我在 git 集线器上使用了 cheynewallace 的代码，可以在这里找到：https://github.com/cheynewallace/angular-s3-upload 尝试让我的模态元素将 selected 文件发送到 Amazon Web Services。我得到了他提供的版本，但无论出于何种原因，我都无法使用模态元素。

Answer 1

看起来您可能混淆了两个指令。 ng-file-select 来自你提到的 danialfarid's angular-file-upload while the file directive is from cheynewallace's example。

如果您要使用 cheynewallace 的指令，那么您可能错过了他的指令（上面已链接）。查看代码，他的指令只支持单个文件上传，并将文件设置为$scope.file变量。在他的示例中，他使用：

<input type="file" file></input>
<a class="btn btn-primary btn-block btn-lg" ng-click="upload()">Upload</a>

您的控制器需要像这样：

app.controller('myController', function($scope) {
    $scope.upload = function() {
        // do something with $scope.file
    };
});

如果您要使用 danialfarid 的指令，则可以从输入中删除 file 属性。这会给你留下：

<input type="file" accept='application/pdf' ng-file-change="onFileSelect($files)"></input>

你的控制器需要看起来像这样：

app.controller('myController', function($scope) {
    $scope.onFileSelect = function($files) {
        // do something with $files
    };
});

警告我没有测试过这两种方法，但我相信任何一种都会让你进入写作轨道。

更新

Here's a working plunk。我刚刚用上面的代码做了一个简单的具体示例，但是我的第一个片段关于 ng-file-change 是错误的。它应该像您最初那样 ng-file-select。 plunk 说明了这两个指令。我还在 danialfarid 示例中添加了 ng-multiple='true' 属性以允许多个文件 selection.

无法从模态元素获取 $file，Angular JS

Unable to get $file from Modal element, Angular JS

javascript

amazon-s3

amazon-web-services

angularjs