如何使用ngflow angular js进行单次和多次上传答案

【问题标题】：How to have both single and multiple upload using ngflow angular js如何使用ngflow angular js进行单次和多次上传
【发布时间】：2015-09-10 21:38:25
【问题描述】：

您好，我正在使用带有 angularjs 的 ngflow 来上传文件，它工作正常。我要求在同一个表单中会有两个上传按钮。一张上传单个文件，一张上传多个文件，两者中选择的文件需要显示在同一个表格中。

执行此操作的一种方法是在同一页面上创建两个流实例，然后在其中一个上指定单个文件选项 true，但这样我将不得不创建两个表来显示所选文件。

    <div flow-init="{target: '/upload', singleFile: true}"> 
    <span class="btn" flow-btn >
    <i class="icon icon-file"></i>Upload Single File</span> 
</div> 


    <div flow-init="{target: '/upload'}">
    <span class="btn" flow-btn >
    <i class="icon icon-file"></i>Upload Multiple File</span> 
  </div>

所以我目前遇到的问题是： 1）显示从同一个表中的单个和多个中选择的文件，如果来自 singleFile upload 。上传一个文件后，第二个文件将超过现有文件，第一个文件将被取消。而从多个文件中，它将附加到先前的选择。 2) 如何在单文件上传中发送额外的参数。

【问题讨论】：

标签： javascript java jquery angularjs file-upload

【解决方案1】：

你可以有一个单流实例

<table flow-init="{target: '/upload'}"
flow-file-added="someHandlerMethod($file, $event, $flow)"
><tr><td>
<span class="btn" id="btn-single" flow-btn flow-single-file >
    <i class="icon icon-file"></i>Upload Single File
</span>
</tr></td>
<tr><td>
<span class="btn" id="btn-multi" flow-btn >
    <i class="icon icon-file"></i>Upload More Files
</span>
</tr></td>

在您的控制器中：

var singleFile;
$scope.someHandlerMethod = function ($file, $event) {
    //$event.target input used to upload the file

    // you should be able to get element id by one of these methods: 
    //$event.target.id
    //$event.target.parentNode.id// to get span element id
    if ($event.target.parentNode.id == "btn-single") {
        singleFile && singleFile.cancel();
        singleFile = $file;
        $file.isSingle = true;// can be used later to set custom params for the target.
    } else {
...

    }
}

要为每个文件设置自定义参数，您应该将target、headers 或query 选项设置为函数。文档：https://github.com/flowjs/flow.js#configuration

query: function ($file) {
return {isSingle: $file.isSingle};
}

【讨论】：