Question

我使用输入类型='文件'多个元素，但是服务器端限制我一次只能上传一个文档。所以我很难找到一种方法来做到这一点，同时只保留单个文件输入元素...我认为我唯一的选择是用自己的隐藏文件输入元素创建多个表单，因为我循环遍历文件以某种方式设置隐藏输入字段的值，但我不知道如何。任何推荐？以下是我到目前为止的情况：

HTML:
<form method='POST' id='frmUploadDoc' enctype='multipart/form-data' target='hiddenIframe' action='/wle/rest'>
    <input type="file" name="data" multiple="multiple" id="filesInput">
    <input type="submit" value="Submit"/>
</form>
<iframe name="hiddenIframe" id="hiddenIframe" style="display: none;">

JAVASCRIPT:
function handleFileSelect(evt) {      
    var files = evt.target.files; // FileList is a FileList of File objects.  
    var output = [];
    var actionText;
    for (var iCount = 0, f; f = files[iCount]; iCount++) {
       actionText="/wle/rest?action=addDocument&name=" + iCount   //This creates the unique action URL for each individual form  
       $("#frmUploadDoc").attr("action", actionText);
       output.push("<li><strong>", f.name, "</strong></li>");
       postDocumentToWLE(iCount);            
    }
    document.getElementById('listDocs').innerHTML = '<ul>' + output.join('') + '</ul>';
  }

Answer 1

经过大量研究后，看来大卫是正确的，通过iframe通过POST上传表格，无法上传多个文件。 HTML5允许多文件上传，但如果您需要单独发送每个文件，则无法使用多文件输入。

Answer 2

未经测试，但根据您对浏览器支持的要求，您应该可以使用FormData来完成。

您可以通过读取files属性来访问具有multiple属性的输入字段中选择的所有文件：

var files = document.getElementById('input').files;

然后，您可以遍历文件，为每个文件创建一个FormData对象，然后激活一个AJAX请求。有关代码示例的更详细说明：https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

请记住，并非所有浏览器都支持FormData对象。但话说回来，所有浏览器都不支持多重属性......

如何一次上传多个文件？

2 个答案: