Envoi de plusieurs champs de saisie de fichiers par programme dans une forme

J'essaie d'utiliser le plugin blueimp / jQuery-File-Upload pour envoyer par programme plus d'un champ de saisie de fichier sous la même forme.

Lorsque l'utilisateur sélectionne les fichiers de formulaire, il suffit de les ajouter dans une variable JS pour les envoyer avec $('#form').fileupload('send') lors de la soumission de formulaire. Mon objectif est d'utiliser exactement la même forme synchrone que j'avais utilisée avant d'une manière asynchrone. Donc, lorsque l'utilisateur clique sur le bouton de soumission du formulaire, il empêche les actions par défaut et les permettent au plugin de faire la tâche, en envoyant toutes les données du formulaire et en affichant la progression globale du téléchargement.

Je suis principalement suivi de ces guides:

• Https://github.com/blueimp/jQuery-File-Upload/wiki/API
• Https://github.com/blueimp/jQuery-File-Upload/wiki/Multiple-File-Input-Fields-in-One-Form

En fait, il fonctionne presque, mais il n'envoie pas plus d'un fichier d'entrée à la fin du serveur. Dans l'événement fileuploadadd , je suis en data.files[0] pousser data.files[0] (mes entrées de fichier sont un seul fichier, mais chacun d'entre eux utilise différents attributs d' accept ) à un tableau de uploadable "global" puis, lors de la soumission de formulaire, j'utilise quelque chose comme $('#form').fileupload('send', {files: uploadable}) .

• Retourner le succès sur la suppression dans JQuery FileUpload
• Remplissez les champs d'entrée HTML5 avec le fichier XML téléchargé
• Comment obtenir des fichiers téléchargés après le formulaire de soumettre en utilisant le téléchargement?
• Afficher une image après avoir téléchargé dans JS angulaire?
• Javascript file.type ne fonctionne pas sur IE 11

Je suppose que je ne le fais pas correctement, car un seul fichier est envoyé avec les données du formulaire. Quelle est la manière correcte d'envoyer par programme plus d'un fichier d'entrée de fichier en utilisant un seul formulaire?

Je ne suis pas trop confiant quant à la progression globale du téléchargement … Si fileuploadprogressall événement fileuploadprogressall pour lire la progression du téléchargement, cela signalera-t-il la progression de tous les fichiers téléchargés?

JS (simplifié)

 $(function () { var uploadable = []; $('#form').fileupload({ autoUpload: false, singleFileUploads: false, add: function (event, data) { uploadable.push(data.files[0]); return false; }, // other event callbacks }) .prop('disabled', !$.support.fileInput) .parent().addClass($.support.fileInput ? undefined : 'disabled'); $('#form').submit(function (event) { event.preventDefault(); $('#form').fileupload('send', {files: uploadable}); }); }); 

HTML

 <form id="form" action="upload" method="post" enctype="multipart/form-data"> <!-- other text/hidden inputs that will also be sent --> <input type="file" name="image" id="image" accept="image/*" /> <input type="file" name="video" id="video" accept="video/*" /> </form> 

• Gestion des téléchargements de fichiers avec JavaScript et Google Gears, existe-t-il une meilleure solution?
• Comment puis-je réinitialiser un plugin bluepf jQuery fileupload?
• Blueimp jquery-file-upload comment annuler 1 fichier avant de télécharger
• Télécharger l'image avec JavaScript depuis un autre serveur via AJAX
• Comment arrêter le transfert de fichiers si le navigateur est fermé / téléchargé annulé

 uploadable.push(data.files[0])