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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (17)

我试图使用一个文件输入元素上传多个文件到驱动器使用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}}
提问于
用户回答回答于

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

用户回答回答于

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

<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();

扫码关注云+社区