Plusieurs fichiers uploader qui s’intègre bien avec le formulaire existant

Je sais que cette question est peut-être trop générique, mais après y avoir passé toute la journée, je suis plutôt perdue avec celle-ci.

Tout le monde connaît le plugin uploader, qui s’intégrerait facilement au formulaire existant ?

Tous les plugins de téléchargement que j’ai testés – jQuery File Upload, Plupload, Uploadify, Dropzone.js – sont parfaits pour la soumission de fichiers, mais sont impossibles à intégrer dans un formulaire existant – ils nécessitent généralement la présence de problèmes pour soumettre d’autres champs de formulaire, etc.

J’ai besoin de quelque chose d’aussi simple que: l’utilisateur remplit le formulaire, traîne les fichiers dans la zone de repository (ou ne le fait pas, s’il ne veut pas en envoyer) et soumet le formulaire. Je n’ai même pas besoin de soumettre un formulaire Ajax (bien que j’aimerais le recevoir).

Des conseils?

    Si vous ne souhaitez pas utiliser le téléchargement de fichiers Ajax, vous n’avez pas besoin d’utiliser de plug-in. Utilisez simplement la soumission de formulaire simple (par défaut) (clic de soumission d’entrée).

    Cela équivaudrait à append d’autres champs de saisie tels que:

       

    Maintenant, côté serveur, vous devez boucler pour chacun des fichiers. Je suis meilleur en ASP.NET, donc, je vous dirais comment le faire en ASP.NET. Si vous utilisez un autre langage, vous pourriez tout de même avoir l’astuce ou l’idée principale.

     for(int i =0; i < numFiles; i++) { var uploadedFile = Request.Files[i]; /* save it! */ } 

    Ce qui précède est une boucle for, où vous effectuez une boucle équivalente au nombre de fichiers envoyés avec HttpRequest. Et vous obtenez chacun des fichiers et faites ce que vous voulez y faire.

    Celui-ci est simple! Vous pouvez changer le code pour votre propre langue telle que PHP, etc.

    Le téléchargement de fichiers AJAX est assez facile lorsque vous supprimez les fonctionnalités supplémentaires:

     var fd = new FormData(form); var xhr = new XMLHttpRequest(); xhr.upload.addEventListener("progress", function(e) { // Handle progress }, false); xhr.addEventListener("load", function(e) { if( xhr.status == 200 ) { // Handle success } else { // Handel error } }, false); xhr.addEventListener("error", function(e) { // Handle error }, false); xhr.addEventListener("abort", function(e) { // Handle abort }, false); try { xhr.open('POST', 'http://server.com/uploader.php', true); xhr.send(fd); } catch(e) { // Handle error }