web-dev-qa-db-fra.com

Comment télécharger plusieurs fichiers à l'aide d'un élément d'entrée de fichier

J'essaie d'utiliser un élément d'entrée de fichier pour télécharger plusieurs fichiers sur Drive à l'aide du formulaire html. Cela semble fonctionner uniquement pour un fichier, bien que le sélecteur de fichiers permette de sélectionner plusieurs fichiers. De retour dans la visionneuse du journal de script, je ne vois qu'un seul fichier capturé des deux que j'ai téléchargés. Est-ce non pris en charge ou est-ce que je vais dans le mauvais sens?

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>

Affichage du journal:

{"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

La sélection de plusieurs fichiers dans la boîte de dialogue lorsque vous cliquez sur le bouton Parcourir du champ Fichier se produit uniquement pour les nouveaux navigateurs prenant en charge HTML5 . Il ne permettra pas la sélection multiple pour les anciens navigateurs. Pour les navigateurs plus anciens, les seules bonnes solutions sont les plugins flash ou javascript. Voici une bonne ressource pour les uploaders jquery (certains supportent plusieurs fichiers): http://creativefan.com/10-ajax-jquery-file-uploaders/ . Par conséquent, ma suggestion est d'utiliser un plugin pour qu'il soit pris en charge sur les anciens ainsi que les nouveaux navigateurs.

8
Ujwal Abhishek

J'utilise la possibilité d'envoyer un tableau de fichiers. Ajoutez simplement [] pour nommer un attribut:

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

Vous aurez un tableau de tableaux dans $_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
                )

        )

)

Bien sûr, vous devrez les télécharger un par un. Ne convient pas à un grand nombre de fichiers, mais fonctionne dans tous les navigateurs. Par exemple, en utilisant jQuery, vous pouvez ajouter une entrée de plus à chaque fois la dernière files[] l'entrée a été modifiée.

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

Vous pouvez utiliser HTML5 form-data & upload-multiple , veuillez vérifier ce lien: https://stackoverflow.com/a/20628748/1530842

4
Harry S

Que diriez-vous de cet exemple de script?

Dans cet exemple, le flux suivant est exécuté.

  1. Sélectionnez les fichiers dans le navigateur.
  2. Téléchargez les fichiers chaque fichier.
  3. Enregistrez chaque fichier dans Google Drive.
  4. Dans cet exemple de script, les ID de fichier des fichiers créés sont renvoyés à la console.

Lorsque vous l'utilisez, copiez et collez le script Google Apps et le code HTML dans l'éditeur de script, puis exécutez le code HTML à l'aide de la boîte de dialogue, de la barre latérale et des applications Web.

Code.gs: script 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 et 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>

Remarque:

0
Tanaike