遍历多个文件上传字段

Question

我有一个指令，该指令实质上是使用其他 HTML 表单元素填充多个单独的输入文件字段。该机制本身是通过自动填充具有元素数量的数组来完成的，随着添加更多文件字段，该数组为 pushed/popped。这本身驱动一个带有数字列表的数组，理想情况下应该改变每个元素的 name/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>

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

遍历多个文件上传字段

Iterating through multiple file upload fields

javascript

angularjs

ng-file-upload