22

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

代码.gs：

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

索引.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}}
4

3 回答 3

8

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

于 2013-04-03T04:35:01.647 回答
7

我正在使用发送文件数组的可能性。只需添加[]到名称属性：

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

你将有数组数组$_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
                )

        )

)

当然，您必须一一上传。不方便处理大量文件，但适用于所有浏览器。例如，使用 jQuery，您可以在每次files[]更改最后一个输入时再添加一个输入。

function addOneMoreInput() {
    $('input[type=file]').last().change(function() {
        $(this).after('<input type="file" name="files[]" />');
        $(this).off('change');
        addOneMoreInput();
    });
}
addOneMoreInput();
于 2015-08-26T07:13:44.927 回答
0

这个示例脚本怎么样？

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

  1. 在浏览器中选择文件。
  2. 上传每个文件的文件。
  3. 将每个文件保存在 Google Drive 中。
  4. 在此示例脚本中，创建的文件的文件 ID 将返回到控制台。

当您使用它时，请将 Google Apps 脚本和 HTML 复制并粘贴到脚本编辑器中，然后使用对话框、侧边栏和 Web 应用程序运行 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>

笔记：

于 2019-04-22T04:09:36.433 回答