web-dev-qa-db-ja.com

1つのファイル入力要素を使用して複数のファイルをアップロードする方法

1つのファイル入力要素を使用して、htmlフォームを使用して複数のファイルをドライブにアップロードしようとしています。ファイルピッカーでは複数のファイルを選択できますが、これは1つのファイルに対してのみ機能するようです。スクリプトログビューアに戻ると、アップロードした2つのファイルのうちキャプチャされたファイルが1つしか表示されません。これはサポートされていないのですか、それとも間違っていますか？

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}}
htmlgoogle-apps-script
21
jad

ファイルフィールドの参照ボタンをクリックすると、ダイアログで複数ファイルが選択されますが、これは HTML5をサポートする新しいブラウザー に対してのみ発生します。古いブラウザの複数選択は許可されません。古いブラウザの場合、唯一の良い解決策はフラッシュまたはjavascriptプラグインです。 jqueryアップローダー（いくつかは複数のファイルをサポートしています）に適したリソースを次に示します。 http://creativefan.com/10-ajax-jquery-file-uploaders/ 。したがって、私の提案は、新しいブラウザだけでなく古いブラウザでもサポートされるように、いくつかのプラグインを使用することです。

8
Ujwal Abhishek

ファイルの配列を送信する可能性を使用しています。 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
                )

        )

)

もちろん、1つずつアップロードする必要があります。多数のファイルには便利ではありませんが、すべてのブラウザーで機能します。たとえば、jQueryを使用すると、最後のfiles[]入力が変更されるたびにもう1つ入力を追加できます。

function addOneMoreInput() {
    $('input[type=file]').last().change(function() {
        $(this).after('<input type="file" name="files[]" />');
        $(this).off('change');
        addOneMoreInput();
    });
}
addOneMoreInput();
6
vladkras

HTML5form-data＆upload-multipleを使用できます。このリンクを確認してください： https://stackoverflow.com/a/20628748/1530842

4
Harry S

このサンプルスクリプトはどうですか？

このサンプルでは、​​次のフローが実行されます。

  1. ブラウザでファイルを選択します。
  2. ファイルをすべてのファイルにアップロードします。
  3. 各ファイルをGoogleドライブに保存します。
  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>

注意：

0
Tanaike