logo标签列表

AngularJS：将ng-model绑定到input[type=file]会引发“不再可用”的异常

angularjsangularjs-ng-repeat
5

使用以下代码：

<!doctype html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>ngTest</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.js"></script>
    <script>
        angular
            .module('app', [])
            .controller('Main', ['$scope', function($s) {
                $s.data = {
                    level1: {
                        level2: {
                            elements: [{
                                name: 'item1'
                            },{
                                name: 'item2'
                            },{
                                name: 'item3'
                            },{
                                name: 'item4'
                            }]
                        }
                    }
                };
            }]);
    </script>
</head>
<body ng-controller="Main">
    <div ng-repeat="item in data.level1.level2.elements">
        <input type="file" ng-model="item.name">
    </div>
    <pre>{{data}}</pre>
</body>

会引发此错误：

Error: An attempt was made to use an object that is not, or is no longer, usable.

只需将 type="file" 更改为 type="text"，错误即可消失。有什么办法可以解决这个问题吗？我将编写一个指令，该指令将侦听输入的 change 事件，上传给定文件并将其值分配给绑定模型。但是，这个错误阻止了我这样做。最近几天让我很苦恼。如果对此有任何意见，将不胜感激。

不确定您预期通过预填文件输入要做什么。它有什么好处？您没有原始文件对象。 - charlietfl
仅设置模型绑定，而不是预填充输入。然而，我必须承认它给了我一个创建包装器元素并将绑定添加到其中的想法，而不是直接添加到输入本身。 - Aleksandr Makov
1
当您设置ng-model并且已经为该作用域属性设置了一个值时，您实际上正在填充输入值...这在文件输入上无法工作。 - charlietfl
我明白。但是，您能否给出一个建议，我该如何解决这个问题？以便通过输入上传的文件（实际上是它的名称）可以绑定到模型？ - Aleksandr Makov
如果是我，我会将其输出为文本，并添加按钮以进行更改、删除或其他所需操作。需要更好地了解目标是什么。 - charlietfl
1
据我所知，ng-model在输入文件上不起作用。如果您正在寻找使用Angular进行文件上传，请查看angular-file-upload插件：https://github.com/danialfarid/angular-file-upload。它是轻量级的并支持上传（适用于HTML5和非HTML5浏览器）、进度、取消/中止以及拖放。在Angular中使上传工作有点棘手。它使用常规的$http发送文件。 - danial
1个回答
2

对于单个输入，我只需使用

<input ng-model="file" onchange="angular.element(this).scope().upload(this)" type="file">

然后我在控制器函数中获取一个fileList并将其发送给文件阅读器，例如：

$scope.upload = function(el) {
  console.log(el.files);
};

我针对ng-repeat的情况进行了扩展，因此您可以检查这个plunker。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接