Javascript上传多个自动生成的文件表单

【问题标题】：Javascript uploading multiple auto generated file formsJavascript上传多个自动生成的文件表单
【发布时间】：2017-01-20 07:46:29
【问题描述】：

在我的页面中，我只有一个 html 文件输入：

input type="file" name="file" files-model="service.file" id="filo" accept=".zip" />

我曾经让我的文件以这样的多部分文件请求上传：

 var fd = new FormData();
 fd.append('file', filo.files[0]);//filo is the id of the input
 //and send my http request having fd as a parameter

问题是现在我的页面中有自动生成的表单，带有 angular ng-repeat，所以我无法再使用输入 ID 获取我的文件，我现在该怎么做？

干杯，

【问题讨论】：

你什么时候给这个fd.append()打电话？请提供plunker示例

标签： javascript jquery angularjs file multipartform-data

【解决方案1】：

使用 javascript 会有点棘手。 this 图书馆为我工作。请参阅下面的示例。

<a class="btn btn-sm btn-primary" 
   type="file"
   ngf-select="receiveSlectedFiles($file)">
   Select Logo
</a>

当你选择文件时，你会在 receiveSlectedFiles($file) 函数中得到它。当用户选择有效文件时，它将在 $file 中，否则 $file 将为空。

控制器中的示例：

 var arrayOfFiles = [];
   $scope.receiveSlectedFiles = function (file) {
    if (file) {
        arrayOfFiles.push(file);
    }
};

在服务中，注入上传，然后使用以下代码上传图片：

this.uploadMultiple = function (files) {
        var uri = yourApiUrl;

        return Upload.upload({
            url: uri,
            arrayKey: '',
            data: {
                files: files
            }
        })
    };

在控制器中，您只需将文件数组传递给该服务。

【讨论】：