Html 如何使用一个文件输入元素上载多个文件_Html_Google Apps Script

Html 如何使用一个文件输入元素上载多个文件

html google-apps-script

Html 如何使用一个文件输入元素上载多个文件,html,google-apps-script,Html,Google Apps Script,我正在尝试使用一个文件输入元素，使用html表单将多个文件上传到驱动器。这似乎只适用于一个文件，尽管文件选择器允许选择多个文件。回到脚本日志查看器中，我只看到我上传的两个文件中的一个被捕获。这是不受支持的，还是我走错了方向代码G.gs： function logForm(form) { Logger.log(JSON.stringify(form)); return true; } index.html： <html> <form id="uploadTest"

我正在尝试使用一个文件输入元素，使用html表单将多个文件上传到驱动器。这似乎只适用于一个文件，尽管文件选择器允许选择多个文件。回到脚本日志查看器中，我只看到我上传的两个文件中的一个被捕获。这是不受支持的，还是我走错了方向

代码G.gs：

function logForm(form) {
  Logger.log(JSON.stringify(form));
  return true;
}

index.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>

单击“文件”字段的“浏览”按钮时，对话框中的“多个文件选择”仅适用于。它不允许对旧浏览器进行多个选择。对于较旧的浏览器，唯一好的解决方案是flash或javascript插件。这是jquery上传程序的一个很好的资源（有些支持多个文件）：。因此，我的建议是使用一些插件，以便在旧浏览器和新浏览器上都支持它。

我正在使用可能性发送文件数组。只需将

[]

添加到名称属性：

<form action="/" enctype="multipart/form-data" method="post">
    <input type="file" name="files[]" />
    <input type="file" name="files[]" />
    // etc.
    <input type="submit">
</form>

当然，你必须一个接一个地上传它们。对大量文件不方便，但适用于所有浏览器。例如，使用jQuery，您可以在每次更改上次的

files[]

input时再添加一个输入

function addOneMoreInput() {
    $('input[type=file]').last().change(function() {
        $(this).after('<input type="file" name="files[]" />');
        $(this).off('change');
        addOneMoreInput();
    });
}
addOneMoreInput();

函数addOneMoreInput（）{
$（'input[type=file]'）.last（）.change（function（））{
$（本）。在（''）之后；
$（此）.off（'change'）；
addOneMoreInput（）；
});
}
addOneMoreInput（）；

这个示例脚本怎么样

在此示例中，运行以下流

在浏览器中选择文件

上传每个文件的文件

将每个文件保存在Google Drive中

在这个示例脚本中，已创建文件的文件ID将返回到控制台

使用此功能时，请将Google应用程序脚本和HTML复制并粘贴到脚本编辑器，然后使用对话框、侧栏和Web应用程序运行HTML

Code.gs:Google应用程序脚本 index.html:html和Javascript


函数getFiles（）{
常量f=document.getElementById（'files'）；
[…f.files].forEach（（文件，i）=>{
const fr=new FileReader（）；
fr.onload=（e）=>{
const data=e.target.result.split（“，”）；
const obj={fileName:f.files[i]。名称，mimeType:data[0]。匹配（/：（\w.+）；/）[1]，数据：data[1]}；
google.script.run.withSuccessHandler（（id）=>{
console.log（id）；
}).saveFile（obj）；
}
fr.readAsDataURL（文件）；
});
}

注:

```
index.html
```
可以作为和运行
在这个示例脚本中，输入标记使用multiple属性

谢谢你，Ujwal，我尝试了你提供的链接，效果非常好！。我知道浏览器的限制，但觉得奇怪的是，我被允许选择多个文件，但只有一个被分配给元素。作为最后的手段，我打算添加+和-按钮来创建/删除其他元素，但这更优雅：）

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
                )

        )

)

function addOneMoreInput() {
    $('input[type=file]').last().change(function() {
        $(this).after('<input type="file" name="files[]" />');
        $(this).off('change');
        addOneMoreInput();
    });
}
addOneMoreInput();

function saveFile(obj) {
  var blob = Utilities.newBlob(Utilities.base64Decode(obj.data), obj.mimeType, obj.fileName);
  return DriveApp.createFile(blob).getId();
}

<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>