使用AngularJS和input[type=file]显示文件列表

Question

我可以帮忙将用户使用input[type=file]选择的文件列表展示出来。 HTML代码：

<div ng-app="myApp">
    <div ng-controller="UploadFilesCtrl">
        <input type="file" onchange="angular.element(this).scope().uploadFiles(this)" multiple />
        <ul>
            <li ng-repeat="name in filenames">
                {{name}}
            </li>
        </ul>
        <button ng-click="test()">PRINT</button>
    </div>
</div>

JS

app = angular.module('myApp');

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

    $scope.uploadFiles = function(element){

        var files = element.files;
        var filenames=[];

        for (i=0; i<files.length; i++){
            filenames.push(files[i].name);
        }


        $scope.files = files;
        $scope.filenames = filenames;   
        console.log(files, filenames);
    };


    $scope.test = function(){
        console.log($scope.files, $scope.filenames);
    }
}]);

有些原因导致列表从未更新。

$scope 中的 filenames 和 files 变量在 uploadFiles 函数之外从未更新（当我选择文件后点击打印按钮时，会得到 undefined）。

有任何想法吗？

谢谢！

- lsxliron

---

angular.element(this).scope().uploadFiles(this) 我想这可能不会引起 Angular 的 digest。这似乎是指令的工作，但在此期间，您可以尝试 $scope.$apply(function() { $scope.files = files; }); 来查看是否实际上是一个 digest 问题。 - CodingIntrigue

我刚刚找到了你获取这个片段的答案。在假定被接受的答案是正确的之前，你应该阅读评论 :) - CodingIntrigue

你有收到任何错误吗？ - Ramesh Rajendran

"$scope.apply"由于某种原因无法正常工作。最终我尝试创建了一个指令。谢谢！ - lsxliron

这在Chrome和IE中运行良好，但在Firefox中无法工作，在Firefox中会出现TypeError：angular.element（...）。scope（...）。uploadFiles不是函数的错误。 - Urvashi Bhatt

Answer 1

使用 $scope.$apply() 更新您的 $scope 对象。

...
$scope.files = files;
$scope.filenames = filenames;   
$scope.$apply();
console.log(files, filenames);
...

Rest工作正常。

编辑:

RGraham 是正确的。这不是一个完整的解决方案。你应该使用directive而不是work around。但是，仅仅为了解决问题，你可以像这样检查digest是否在进行中：

if ($scope.$root.$$phase != '$apply' && $scope.$root.$$phase != '$digest') {
    $scope.$apply();
}

更新的代码片段：http://jsfiddle.net/Sourabh_/HB7LU/13086/

- Zee

---

这不是一个很好的解决方案。虽然在调试时可以使用，但 OP 应该切换到使用指令，这样他们就不需要 $scope.$apply。如果已经有一个 digest 在进行中，你的代码将会导致错误。 - CodingIntrigue

Answer 2

你不需要使用 $scope.$apply()

你的代码看起来非常好，如果你按照以下步骤操作，它应该可以正常工作。

但是你只错过了一件事，但那是主要的一件事。

我想你可能遇到了下面的错误：

Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to: Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

请在浏览器控制台中验证，如果你遇到了这个错误，请尝试这样做：

app = angular.module('myApp',[]);

而不是

app = angular.module('myApp');

你在主模型中漏掉了空的子模型 ('myApp',[]);

所有其他代码看起来都很好。

更新:

请查看此示例，现在当你点击打印按钮时，会显示你选择的文件名。

- Ramesh Rajendran

---

为什么要给我负评？我已经更新了我的回答。@pankajparkar - Ramesh Rajendran

@ameshrajendran 我没有给这个回答点踩，但是你的回答不正确。你理解错了，我认为是楼主做错了。 - Pankaj Parkar

@RameshRajendran。-1，你的第一行并不是回答OP问题的答案。 - Zee

第一行不是给 OP 的，那是为了 @Sourabh- 的回答。 - Ramesh Rajendran

@RameshRajendran。你可以在评论中完成这个任务。无论如何，我已经取消了踩的操作。 :) - Zee