迭代多个文件上传字段

时间:2016-04-06 19:09:07

标签: javascript angularjs ng-file-upload

我有一个指令,基本上用其他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>

当提交被触发时,我不清楚让客户端脚本作为一个不同的组迭代所有可用字段的最佳机制。在名称/ id中使用模板变量调用是一个主要的抛弃,如果我可以完成一个没有这个眼睛的向上扩展的解决方案,那将是伟大的。我已经知道我将如何最终存储所有现场数据(通过迭代POST REST调用 - 我正在使用非常过时的API),但是要实现这一步骤需要确定最佳状态处理多个字段条目的方法。有什么建议吗?

我应该澄清一下,我正在使用ng-form-upload来协助处理文件输入字段中的数据。

1 个答案:

答案 0 :(得分:0)

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

this.selectedLanguage

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