Html 如何使用一个文件输入元素上传多个文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15726439/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to upload multiple files using one file input element
提问by jad
I'm trying to use one file input element to upload multiple files to Drive using html form. This seems to work only for one file, although the file picker allows selecting multiple files. Back in the script log viewer, I only see one file captured of the two I uploaded. Is this unsupported, or am I going the wrong way about it?
我正在尝试使用一个文件输入元素使用 html 表单将多个文件上传到云端硬盘。这似乎只适用于一个文件，尽管文件选择器允许选择多个文件。回到脚本日志查看器，我只看到我上传的两个文件中的一个文件。这是不受支持的，还是我走错了路？
Code.gs:
代码.gs：
function logForm(form) {
Logger.log(JSON.stringify(form));
return true;
}
index.html:
索引.html：
<html>
<form id="uploadTest" enctype="multipart/form-data">
<input type="file" multiple="multiple" name="fileUpload">
<input type="button" id="upload" value="upload"
onclick="google.script.run.logForm(document.getElementById('uploadTest'));">
</form>
</html>
Log view:
日志视图：
{"fileUpload":{"contents":"GIF87a\u0001\u0000\u0001\u0000?
\u0000\u0000?????,\u0000\u0000\u0000\u0000\u0001\u0000
\u0001\u0000\u0000\u0002\u0002D\u0001\u0000;",
"type":"image/gif","name":"1x1.gif","length":35}}
采纳答案by Ujwal Abhishek
The multiple file select in the dialog when you click on the browse button of the file field happens only for the new browsers supporting HTML5. It wont allow multiple select for old browsers. For older browsers the only good solutions are flash or javascript plugins. Here is a good resource for jquery uploaders ( some support multiple files ): http://creativefan.com/10-ajax-jquery-file-uploaders/. Hence my suggestion is use some plugin so that its supported on old as well as the new browsers.
单击文件字段的浏览按钮时，对话框中的多文件选择仅适用于支持 HTML5的新浏览器。它不允许对旧浏览器进行多项选择。对于较旧的浏览器，唯一好的解决方案是 flash 或 javascript 插件。这是 jquery 上传者的一个很好的资源（有些支持多个文件）：http: //creativefan.com/10-ajax-jquery-file-uploaders/。因此我的建议是使用一些插件，以便它在旧浏览器和新浏览器上都受支持。
回答by vladkras
I'm using possibility to send array of files. Just add []to name atrribute:
我正在使用发送文件数组的可能性。只需添加[]到名称属性：
<form action="/" enctype="multipart/form-data" method="post">
<input type="file" name="files[]" />
<input type="file" name="files[]" />
// etc.
<input type="submit">
</form>
You will have array of arrays in $_FILES
你将有数组数组 $_FILES
Array
(
[files] => Array
(
[name] => Array
(
[0] => 1.png
[1] => 2.png
)
[type] => Array
(
[0] => image/png
[1] => image/png
)
[tmp_name] => Array
(
[0] => /tmp/phpDQOZWD
[1] => /tmp/phpCELeSw
)
[error] => Array
(
[0] => 0
[1] => 0
)
[size] => Array
(
[0] => 32209
[1] => 64109
)
)
)
Of course, you you'll have to upload them one by one. Not convenient to a large number of files, but works in all browsers. For example,using jQuery you can add one more input each time last files[]input was changed.
当然，您必须将它们一一上传。对大量文件不方便，但适用于所有浏览器。例如，使用 jQuery 您可以在每次files[]更改最后一个输入时再添加一个输入。
function addOneMoreInput() {
$('input[type=file]').last().change(function() {
$(this).after('<input type="file" name="files[]" />');
$(this).off('change');
addOneMoreInput();
});
}
addOneMoreInput();
回答by Tanaike
How about this sample script?
这个示例脚本怎么样？
In this sample, the following flow is run.
在此示例中，运行以下流程。
- Select files at browser.
- Upload the files every file.
- Save each file in Google Drive.
- In this sample script, the file IDs of created files are returned to the console.
- 在浏览器中选择文件。
- 上传每个文件的文件。
- 将每个文件保存在 Google Drive 中。
- 在此示例脚本中，创建的文件的文件 ID 将返回到控制台。
When you use this, please copy and paste the Google Apps Script and HTML to the script editor, and run the HTML using the dialog, sidebar and Web Apps.
当您使用它时，请将 Google Apps 脚本和 HTML 复制并粘贴到脚本编辑器中，然后使用对话框、侧边栏和 Web Apps 运行 HTML。
Code.gs: Google Apps Script
Code.gs：Google Apps 脚本
function saveFile(obj) {
var blob = Utilities.newBlob(Utilities.base64Decode(obj.data), obj.mimeType, obj.fileName);
return DriveApp.createFile(blob).getId();
}
index.html: HTML and Javascript
index.html：HTML 和 Javascript
<input name="file" id="files" type="file" multiple>
<input type='button' value='Upload' onclick='getFiles()'>
<script>
function getFiles() {
const f = document.getElementById('files');
[...f.files].forEach((file, i) => {
const fr = new FileReader();
fr.onload = (e) => {
const data = e.target.result.split(",");
const obj = {fileName: f.files[i].name, mimeType: data[0].match(/:(\w.+);/)[1], data: data[1]};
google.script.run.withSuccessHandler((id) => {
console.log(id);
}).saveFile(obj);
}
fr.readAsDataURL(file);
});
}
</script>
Note:
笔记：
index.htmlcan be run as Web Appsand the side bar and dialog of Google Docs.- In this sample script, the input tag uses the multiple attribute.
index.html可以作为Web Apps和Google Docs 的侧栏和对话框运行。- 在此示例脚本中，输入标记使用 multiple 属性。
