Как загрузить несколько файлов с помощью одного элемента ввода файла

Я пытаюсь использовать один элемент ввода файла для загрузки нескольких файлов на диск с использованием формы html. Кажется, что это работает только для одного файла, хотя сборщик файлов позволяет выбирать несколько файлов. Вернувшись в просмотрщик журналов script, я вижу только один файл, захваченный двумя загруженными мной. Не поддерживается ли это, или я не ошибаюсь?

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

Ответ 1

Выбор нескольких файлов в диалоговом окне при нажатии кнопки просмотра в поле файла происходит только для новых браузеров, поддерживающих HTML5. Это не позволит использовать несколько вариантов для старых браузеров. Для более старых браузеров единственными хорошими решениями являются flash или javascript-плагины. Вот хороший ресурс для загрузчиков jquery (некоторые поддерживают несколько файлов): http://creativefan.com/10-ajax-jquery-file-uploaders/. Поэтому в моем предложении используется некоторый плагин, чтобы он поддерживался как старыми, так и новыми браузерами.

Ответ 2

Я использую возможность отправки массива файлов. Просто добавьте [], чтобы назвать 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();

Ответ 3

Вы можете использовать HTML5 данные формы и upload-multiple, пожалуйста, проверьте эту ссылку: fooobar.com/info/290572/...