Question

你不得不原谅我，我不经常使用Angular。我需要实现一个解决方案，我可以从动态生成的输入字段上传文件。

问题在于我不能使用任何指令 （这是由于我使用的框架实现了AngularJS）。

我目前创建字段的代码：

$scope.addNewFile = function() {
    var newFileNo = $scope.files.length + 1;
    $scope.files.push({'id': 'file' + newFileNo});
};

$scope.removeFile = function() {
    var lastFile = $scope.files.length - 1;
    $scope.files.splice(lastFile);
};

以下是上传文件的代码（不正确，因为静态id和name值：

$scope.uploadFile = function() {
    var file = document.getElementById('file').files[0],
        r = new FileReader;
    r.onloadend = function (e) {
        var data = e.target.result;
        console.log('data');
        console.log(data);
        // http.post
    };
    r.readAsArrayBuffer(file);
};

这是我的HTML：

<div data-ng-repeat="file in files">
    <div class="row top-buffer">
        <div class="col-lg-10">
            <input type="file"
                   ng-model="file.name"
                   name="file"
                   class="form-control"
                   id="file">
        </div>
        <div class="col-lg-2 text-right">
            <div class="btn btn-primary" ng-click="uploadFile()">Upload</div>
        </div>
    </div>
</div>
<div class="row top-buffer">
    <div class="col-lg-11"></div>
    <div class="col-lg-1 text-right">
        <div class="glyphicon glyphicon-plus" aria-hidden="true" ng-click="addNewFile()"></div>
        <div class="glyphicon glyphicon-minus" aria-hidden="true" ng-click="removeFile()"></div>
    </div>
</div>

我无法理解如何获取动态生成的文件字段的值...任何帮助表示感谢！

Answer 1

ng-model没有<input type=file，但您可以通过id动态设置ng-attr：

<div ng-repeat="file in files">
  {{file.id}}:
  <input type="file"
         ng-attr-name="{{file.id}}"
         ng-attr-id="{{file.id}}">
</div>

在uploadFile()上你可以张贴它们：

$scope.uploadFile = function() {
  $scope.files.forEach(function(file) {
    // $http.post: document.getElementById(file.id).files[0])
  });
};

小提琴上的例子：https://jsfiddle.net/virgilioafonsojr/92nw4j4f/1/

我希望它有所帮助。

Answer 2

正确编写上传器是一项非常困难的任务。上传组件/指令的一个主要问题是让它在Internet Explorer中工作;因为它只能在IE中使用一次。另一个问题是IE不会以编程方式让你按下＆＃34;按＆＃34;按钮，它必须是真正的鼠标点击。

AngularJs有上传库，只有google。但是，如果您打算自己动手，那么您可以使用我的git repo作为如何完成它的示例。只需使用jwtUploader和jwtUploaderButton指令。

https://github.com/smylydon/SEPE-7WCM0033-0206-FRONTEND/tree/master/client/app

AngularJS 1.x：动态创建多个文件上载字段

2 个答案: