javascript - 迭代多个文件上传字段

Question

我有一个指令，本质上是使用其他 HTML 表单元素填充多个单独的输入文件字段。该机制本身是通过自动填充具有元素数量的数组来完成的，随着添加更多文件字段，该数组会被推送/弹出。它本身驱动一个带有数字列表的数组，理想情况下应该改变每个元素的名称/ID(这也不起作用，属性中 { 的存在会导致脚本破坏语法错误)。

<div ng-controller="MultiFileUpload">
    <form ng-submit="file_upload_multiple()" novalidate>
    <div class="upload_fields">
        <fieldset ng-repeat="Item in FileUploadItems">
        <input type="file" name="upload_file" id="upload_file_{{Item}}" ngf-select ng-model="filename_{{Item}}" ngf-max-size="2MB" required />
        <input type="text" name="filename" id="filename_{{Item}}" required/>
        <select name="filetype" id='filetype_{{Item}}' required>
            <option label="" value=""></option>
            <option label="Example Document 1" value="example_doc_1">Example 1</option>
            <option label="Example Document 2" value="example_doc_2">Example 2</option>
        </select>
        </fieldset>
    </div>

    <button>Save Files</button>
</div>

当提交被触发时，我不清楚让客户端脚本作为一个不同的组迭代所有可用字段的最佳机制。在 name/id 中调用模板变量是一个主要的障碍，如果我能够完成一个向上扩展的解决方案，而不会出现这种碍眼的情况，那就太好了。我已经知道如何最终存储所有字段数据(通过迭代 POST REST 调用——我正在使用一个非常过时的 API)，但是要实现该步骤需要确定处理多个字段的最佳方法字段条目。有什么建议吗？

我应该澄清一下，我正在使用 ng-form-upload 来协助完成与文件输入字段中的数据交互的任务。

Answer 1

您可以使用数组来存储模型，如下所示:

<div ng-controller="MultiFileUpload" ng-init="files = [{}]">
    <form ng-submit="file_upload_multiple()" novalidate>
    <div class="upload_fields" ng-repeat="fileData in files">
        <fieldset ng-repeat="Item in FileUploadItems">
        <input type="file" name="upload_file" ngf-select ng-model="fileData.file" ngf-max-size="2MB" required />
        <input type="text" name="filename" ng-model="fileData.name" required/>
        <select name="filetype" ng-model="fileData.type" required>
            <option label="" value=""></option>
            <option label="Example Document 1" value="example_doc_1">Example 1</option>
            <option label="Example Document 2" value="example_doc_2">Example 2</option>
        </select>
        </fieldset>
    </div>

    <button>Save Files</button>
</div>

然后，要添加另一组字段，您可以将一个空对象插入文件中，文件数组将包含需要提交的所有数据。