Question

我正在尝试使用一个文件输入元素，使用html表单将多个文件上传到云端硬盘。这似乎仅适用于一个文件，尽管文件选择器允许选择多个文件。回到脚本日志查看器中，我只看到我上传的两个文件中捕获的一个文件。这是不受支持的，还是我对此采取了错误的方式？

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

日志视图：

{"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}}

Answer 1

当您单击文件字段的浏览按钮时，对话框中的多个文件选择仅针对new browsers supporting HTML5发生。它不允许多个旧浏览器选择。对于旧版浏览器，唯一的好解决方案是flash或javascript插件。这是jquery上传器的一个很好的资源（一些支持多个文件）：http://creativefan.com/10-ajax-jquery-file-uploaders/。因此我的建议是使用一些插件，以便在旧浏览器和新浏览器上支持它。

Answer 2

您可以使用HTML5 form-data＆amp;上传-多个下，请查看此链接：https://stackoverflow.com/a/20628748/1530842

Answer 3

这个示例脚本怎么样？

在此示例中，运行以下流程。

在浏览器中选择文件。
每个文件上传文件。
将每个文件保存在Google云端硬盘中。
在此示例脚本中，已创建文件的文件ID返回到控制台。

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

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

注意：

index.html可以作为Web Apps和the side bar and dialog of Google Docs运行。
在此示例脚本中，输入标记使用Multiple属性。

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

3 个答案:

Code.gs：Google Apps脚本

index.html：HTML和Javascript

注意：