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

jad*_*jad 21 html google-apps-script

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

Code.gs:

function logForm(form) {
  Logger.log(JSON.stringify(form));
  return true;
}
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)

日志视图:

{"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}}
Run Code Online (Sandbox Code Playgroud)

小智 8

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


vla*_*ras 6

我正在使用发送文件数组的可能性.只需添加[]名称atrribute:

<form action="/" enctype="multipart/form-data" method="post">
    <input type="file" name="files[]" />
    <input type="file" name="files[]" />
    // etc.
    <input type="submit">
</form>
Run Code Online (Sandbox Code Playgroud)

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

        )

)
Run Code Online (Sandbox Code Playgroud)

当然,你必须逐个上传它们.对大量文件不方便,但适用于所有浏览器.例如,使用jQuery,每次上次files[]输入更改时,您可以再添加一个输入.

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