2013-01-07 2 views
2

J'utilise l'élément multiple input = type 'file', mais pour les restrictions côté serveur, je ne peux télécharger qu'un seul document à la fois. J'ai donc du mal à trouver un moyen de le faire, tout en gardant juste l'élément d'entrée de fichier unique ... Je pense que mes seules options sont de créer plusieurs formulaires avec leurs propres éléments d'entrée de fichiers cachés et de les faire défiler. valeur du champ d'entrée caché, mais je ne suis pas sûr de savoir comment. Des recommandations? Voici ce que j'ai jusqu'à présent:Comment puis-je télécharger plusieurs fichiers un à la fois?

HTML: 
<form method='POST' id='frmUploadDoc' enctype='multipart/form-data' target='hiddenIframe' action='/wle/rest'> 
    <input type="file" name="data" multiple="multiple" id="filesInput"> 
    <input type="submit" value="Submit"/> 
</form> 
<iframe name="hiddenIframe" id="hiddenIframe" style="display: none;"> 

JAVASCRIPT: 
function handleFileSelect(evt) {  
    var files = evt.target.files; // FileList is a FileList of File objects. 
    var output = []; 
    var actionText; 
    for (var iCount = 0, f; f = files[iCount]; iCount++) { 
     actionText="/wle/rest?action=addDocument&name=" + iCount //This creates the unique action URL for each individual form 
     $("#frmUploadDoc").attr("action", actionText); 
     output.push("<li><strong>", f.name, "</strong></li>"); 
     postDocumentToWLE(iCount);    
    } 
    document.getElementById('listDocs').innerHTML = '<ul>' + output.join('') + '</ul>'; 
    } 
+0

'" mais aux restrictions côté serveur je ne peux télécharger qu'un document à la fois "' - Selon ce que ces restrictions sont et comment elles ' re implémenté, il peut ne pas y avoir beaucoup de choses que le code côté client peut faire pour vous. Essayez-vous de télécharger plusieurs fichiers dans un seul POST ou de les télécharger de manière asynchrone avec plusieurs POST via AJAX? – David

+0

L'application a une API REST, donc nous pouvons utiliser une requête POST en utilisant la méthode iframe cachée comme documentée http://www.jainaewen.com/files/javascript/jquery/iframe-post-form.html. A partir de maintenant je l'ai mis à soumettre un formulaire mais je me demande s'il existe un moyen d'analyser simplement les fichiers sélectionnés à partir de l'entrée et pour chaque fichier suffit de créer un nouveau formulaire avec sa propre entrée de fichier. Pour que cela fonctionne, je devrais être capable d'assigner un fichier à ce nouvel élément de fichier et je ne sais pas comment je pourrais le faire. – silvster27

+0

Si je pouvais même simplement soumettre à nouveau le même pour encore et encore et chaque fois sortir les autres fichiers ... cela fonctionnerait aussi. – silvster27

Répondre

0

Après beaucoup de recherches, il ne semble David est exact que avec le téléchargement de formulaire via un POST via un iframe, il est impossible de télécharger des fichiers multiples. HTML5 permet le téléchargement de fichiers multiples mais si vous devez envoyer chaque fichier individuellement, cela n'est pas possible en utilisant une entrée de fichier multiple.

0

Non testé, mais en fonction des exigences que vous avez sur le support du navigateur, vous devriez être capable de le faire en utilisant FormData.

Vous pouvez accéder à tous les fichiers sélectionnés dans un champ d'entrée avec l'attribut multiple en lisant les fichiers propriété:

var files = document.getElementById('input').files; 

Ensuite, vous pouvez parcourir les fichiers, créez un objet FormData pour chacun d'eux et le feu loin d'un Demande AJAX, une à la fois. Pour une explication plus détaillée avec des exemples de code: https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

Rappelez-vous cependant que tous les navigateurs ne prennent pas en charge l'objet FormData. Mais encore une fois, tous les navigateurs ne prennent pas en charge l'attribut multiple non plus ...

Questions connexes