Question

我使用模式元素提示用户选择要上传到网站的文件，而我似乎无法获取该文件。这是我的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);

它似乎应该是一个足够简单的任务，但有些东西不能连接，我不确定是什么。我一直没有定义＆＃39; $文件＆＃39;错误。

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

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

Answer 1

看起来你可能会混淆两个指令。 ng-file-select来自danialfarid's angular-file-upload，而file指令来自您提到的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。插件说明了这两个指令。我还在danialfarid示例中添加了ng-multiple='true'属性，以允许多个文件选择。

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

1 个答案: