IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Publications (X)HTML et CSS Discussion :

Système de transfert multiple de fichiers à l'aide de drag and drop


Sujet :

Publications (X)HTML et CSS

  1. #1
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 418
    Points
    91 418
    Billets dans le blog
    20
    Par défaut Système de transfert multiple de fichiers à l'aide de drag and drop


    FirePrawn vous propose une traduction de l'article HTML5 Drag and Drop Multiple File Uploader par Andrey Prikaznov.

    N'hésitez pas à faire part de vos remarques et commentaires au sujet de cet article.

    Uploader de fichiers multiples avec du drag and drop.

    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  2. #2
    Membre éprouvé Avatar de sebhm
    Homme Profil pro
    Développeur Web
    Inscrit en
    Avril 2004
    Messages
    1 090
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 43
    Localisation : France, Landes (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Agroalimentaire - Agriculture

    Informations forums :
    Inscription : Avril 2004
    Messages : 1 090
    Points : 1 241
    Points
    1 241
    Par défaut
    Bonjour,
    merci pour cet article

    Ca m'a pas l'air top sur IE non ? (j'ai testé qu'avec IE8 alors je suis sûr de rien )
    mais selon cette page, DataTransfer a l'air de ne fonctionner qu'avec un moteur Gecko
    ??

  3. #3
    Candidat au Club
    Homme Profil pro
    Etudiant
    Inscrit en
    Février 2014
    Messages
    2
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Etudiant

    Informations forums :
    Inscription : Février 2014
    Messages : 2
    Points : 3
    Points
    3
    Par défaut
    Bonjour,

    Super article et la traduction est très fidèle à l'original .

    Petite question: je ne comprends pas vraiment: où sont enregistrés les fichiers uploadés sur le serveur ? Je ne vois aucun dossier spécifié.

    PS: je débute en javascript

    Bonne journée.

  4. #4
    Modérateur

    Profil pro
    Inscrit en
    Septembre 2004
    Messages
    12 547
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2004
    Messages : 12 547
    Points : 21 602
    Points
    21 602
    Par défaut
    Dans l'exemple donné le fichier est laissé là où le moteur PHP enregistre les fichiers envoyés par upload. C'est suffisant pour l'exemple, qui montre qu'on a des fichiers et qu'on peut en faire ce qu'on veut.
    Cela veut dire qu'avec cet exemple, les fichiers ne restent pas : PHP les effacera de l'emplacement temporaire où il les a mis.
    N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java

  5. #5
    Candidat au Club
    Homme Profil pro
    Etudiant
    Inscrit en
    Février 2014
    Messages
    2
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Etudiant

    Informations forums :
    Inscription : Février 2014
    Messages : 2
    Points : 3
    Points
    3
    Par défaut
    Oui je l'ai compris après coup, y'avait quelques lignes de php à ajouter en fait.
    Merci pour ta réponse

  6. #6
    Candidat au Club
    Homme Profil pro
    Administrateur de base de données
    Inscrit en
    Décembre 2014
    Messages
    1
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Administrateur de base de données
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Décembre 2014
    Messages : 1
    Points : 3
    Points
    3
    Par défaut Code à ajouter
    Salut Last minute, tu as une idée du code php à rajouter ? j'avoue que je suis perdu. tout fonctionne mais effectivement pas de fichier dans le dossier.

    Merci pour ta réponse
    Cordialement
    Fabien

  7. #7
    Membre à l'essai
    Homme Profil pro
    Développeur / Intégrateur Web Freelance
    Inscrit en
    Novembre 2011
    Messages
    12
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur / Intégrateur Web Freelance
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Novembre 2011
    Messages : 12
    Points : 12
    Points
    12
    Par défaut
    Salut !

    Je sais que l'article date un peu, mais ce script m'intéresse beaucoup pour un projet que je développes actuellement.

    Pourquoi personne n'a répondu concernant l'upload des fichiers ... je comprends bien que dans l'exemple, les fichiers reste dans un emplacement temporaire et sont supprimés ensuite, mais j'aimerais savoir comment faire pour envoyer ces fichiers dans un dossier, afin de les conserver et de réaliser un upload complet ?

    J'ai bien tenté de modifier l'url <input id="url" value="http://www.monsiteweb.com/upload/" /> dans le input mais apparemment cela ne change rien. Je ne vois rien non plus dans le fichier php et si j'ai bien compris l'upload se fait via le script javascript (je n'y connais pas grand chose en javascript).

    Quelqu'un pourrait il enrichir ce post en indiquant la solution ?

    Merci a toutes et a tous.

    Citation Envoyé par klesse
    Salut Last minute, tu as une idée du code php à rajouter ? j'avoue que je suis perdu. tout fonctionne mais effectivement pas de fichier dans le dossier.

    Bonjour Fabien,

    As tu eu une réponse, même si ce post date un peu, je cherche moi aussi la solution

    Merci pour ton aide

    Citation Envoyé par thelvin
    Dans l'exemple donné le fichier est laissé là où le moteur PHP enregistre les fichiers envoyés par upload. C'est suffisant pour l'exemple, qui montre qu'on a des fichiers et qu'on peut en faire ce qu'on veut.
    Cela veut dire qu'avec cet exemple, les fichiers ne restent pas : PHP les effacera de l'emplacement temporaire où il les a mis.
    Bonjour Thelvin

    J'en profite que tu es en ligne pour te poser la question précédente directement ...

    Merci pour ton aide

  8. #8
    Expert éminent sénior

    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2010
    Messages
    5 380
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2010
    Messages : 5 380
    Points : 10 410
    Points
    10 410
    Par défaut
    Salut,

    Faut utiliser des fonctions comme move_upload_file pour transférer des fichiers avec php. Si personne n'a répondu c'est sans doute parce que ce n'est pas le sujet initial.

    Aujourd'hui les navigateurs modernes (firefox, chrome) proposent le drag and drop d'origine. Y'a donc plus de code à rajouter et il suffit de déposer les fichiers sur le bouton d'upload ou de se servir du bouton pour ouvrir l'explorateur de fichiers. On peut aussi agrandir la zone du bouton simplement en css pour faciliter le drag and drop.

    Pour une solution complète et prête à l'emploi avec encore bien plus de fonctionnalités tu peux regarder ce lien.

  9. #9
    Invité
    Invité(e)
    Par défaut A PROPOS DU TRANSFERT DE FICHIER
    Bonjour à toutes et tous,

    J'aimerais savoir comment puis-je récupérer les images envoyées via ce système d'upload de type
    "drag and drop" .
    Le système fonctionne correctement toutefois j'aimerais que lesdites images soient envoyées
    vers un dossier spécifique .
    Quel type d'url via l'input doit-on ajouter car j'ai entré différent url mais sans aucun résultat de
    récupération valable .
    De plus il n'y a pas de lien d'envoi vers un fichier formulaire de récupération en php afin d'avoir les informations
    envoyées via serveur .

    En attente de vos suggestions.
    Merci à toutes et tous .

  10. #10
    Expert éminent sénior

    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2010
    Messages
    5 380
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2010
    Messages : 5 380
    Points : 10 410
    Points
    10 410
    Par défaut
    Salut,

    Tu as essayé quel script exactement ?

    Si tu utilises php côté serveur, il y a une solution complète d'upload avec des exemples fonctionnels ici

  11. #11
    Invité
    Invité(e)
    Par défaut
    Merci pour ta réponse ABCI....
    J'ai ajouté le script php suivant :
    https://script-tutorials.developpez....-upload-html5/
    Ledit script a été ajouté et modifié au sein de mon formulaire php et tout me parait
    fonctionnel toutefois je ne reçois aucun fichier (image) sur le serveur
    informatique .
    A l'instar de l'ancienne pagination .php ou je pouvais envoyer un seul fichier (image)
    à la fois via un bouton upload au sein dudit formulaire .
    Donc je voudrais pouvoir utiliser ce système afin d'envoyer plusieurs fichiers (images)
    vers le serveur ou vers un dossier spécifique qui se trouve sur le serveur .
    Je ne comprends pas pourquoi faut-il spécifier un url au sein de ce scipt .php
    et malgré un url qui me semble correct donc je ne reçois aucun fichier (image)
    Après upload,la "jauge" progression est à 100% mais je n'ai aucune réception
    fichier (image).
    En attente de ta suggestion ou réponse.
    Merci.

  12. #12
    Expert éminent sénior

    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2010
    Messages
    5 380
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2010
    Messages : 5 380
    Points : 10 410
    Points
    10 410
    Par défaut
    Tu utilises un tuto, et comme à peu près tous les tutos, ce n'est pas un script complet et il manque la partie d'upload.

    Je t'ai proposé d'utiliser un module d'upload complet prêt à l'emploi, pourquoi ne l'essayes-tu pas ? Il suffit de dézipper le dossier, le placer sur ton serveur, et tu peux commencer à faire les premiers tests avec les exemples fournis qui sont fonctionnels, c'est une histoire de quelques minutes. Eventuellement je pourrai t'aider en cas de besoin. En plus tu auras une solution beaucoup plus puissante et complète, normal puisque c'est un module conçu pour être utiliser directement sans avoir rien à programmer (mais qui laisse néanmoins toute possibilité de programmation).

  13. #13
    Invité
    Invité(e)
    Par défaut
    Merci pour ta suggestion ABCI.......
    J'ai déjà vérifié ce système d'upload complet toutefois j'aurais voulu ajouter une
    réception d'image via ce type de script .
    Si tu veux je t'envoie ma pagination .php afin que tu puisses peur-être trouver
    la solution afin de réceptionner lesdites images vers un dossier spécifique .

  14. #14
    Expert éminent sénior

    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2010
    Messages
    5 380
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2010
    Messages : 5 380
    Points : 10 410
    Points
    10 410
    Par défaut
    Citation Envoyé par userweb Voir le message
    Merci pour ta suggestion ABCI.......
    J'ai déjà vérifié ce système d'upload complet toutefois j'aurais voulu ajouter une
    réception d'image via ce type de script .
    Si tu veux je t'envoie ma pagination .php afin que tu puisses peur-être trouver
    la solution afin de réceptionner lesdites images vers un dossier spécifique .
    Quel type de script ? Dans celui que je te propose la destination des fichiers est indiquée dans les script serveurs qui sont dans le dosssier "Php_Upload". Par exemple dans le fichier "Php_Upload/UploadAjaxABCI_Upload_Basique.php" tu trouve dans la première ligne de code :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $dossier_destination = '../Destination_Upload1/';
    Il suffit donc de modifier la valeur de $dossier_destination pour changer la destination. Où est ton problème ?

  15. #15
    Invité
    Invité(e)
    Par défaut
    Merci pour ta réponse .
    J'ai vérifié ce codage .php et j'aimerais pouvoir ajouter une ligne de code de ce type
    sur "mes" codages .php afin d'obtenir le même résultat afin d'obtenir un téléchargement
    multiple de part le biais d'un système d'upload de type Drag and Drop.
    Je veux une fonction de type Drag and Drop simplifiée sans devoir passer par des codages
    complexe.
    Merci pour ta compréhension.

  16. #16
    Expert éminent sénior

    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2010
    Messages
    5 380
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2010
    Messages : 5 380
    Points : 10 410
    Points
    10 410
    Par défaut
    Tu as un problème de compréhension au niveau des techniques mises en œuvre pour faire un upload ajax. Ce n'est pas en une ligne de code que tu vas pouvoir faire cela surtout pour un upload multiple. Je t'ai donné une solution complète et fonctionnelle, je ne vais pas passer du temps pour en faire une autre plus minimaliste et moins performante qui ne saura pas surpasser la configuration serveur ni gérer les erreurs par exemple.

    Si cette solution ne te convient pas tu peux en trouver d'autres sur le net, mais si tu regarde le code tu le trouveras toujours complexe, parce que l'upload n'est pas simple, à moins se se limiter au minimum qui buguera à la première occasion parce que le code ne prendra pas en compte tous les problèmes que l'on peut rencontrer lors d'un upload et ils sont nombreux. C'est pour ces raisons que l'on créent des modules qui offrent une interface d'utilisation pour éviter d'avoir à se soucier du code.

  17. #17
    Invité
    Invité(e)
    Par défaut
    Merci pour ta réponse .
    Le système d'upload que j'ai réalisé fonctionne correctement mais je ne peux envoyer qu'un seul fichier de type .jpg/.png
    vers un dossier spécifique qui se trouve sur le serveur informatique .
    De ce fait;j'aimerais utiliser le système Drag and Drop à partir du script de base et non passer par l'utilisation de l'ajax
    car je ne dispose pas des connaissances suffisantes afin d'utiliser ce type de programmation .
    Donc pourrais tu vérifier mon formulaire et voir si il y a possibilité d'envoyer des fichiers de type .jpg/.png à partir
    de ces mises en pages .

  18. #18
    Expert éminent sénior

    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2010
    Messages
    5 380
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2010
    Messages : 5 380
    Points : 10 410
    Points
    10 410
    Par défaut
    Citation Envoyé par userweb Voir le message
    ...j'aimerais utiliser le système Drag and Drop à partir du script de base et non passer par l'utilisation de l'ajax
    car je ne dispose pas des connaissances suffisantes afin d'utiliser ce type de programmation.
    Ce que tu n'as pas compris c'est que le script de base C'EST DE l'AJAX (var xhr = new XMLHttpRequest();...).

    Et quand on a pas les connaissances suffisantes pour créer ce type de programmation, (ou même si on les a mais que l'on veut gagner du temps) on utilise des modules complets comme celui-ci qui offrent une interface d'utilisation pour éviter d'avoir à se soucier du code.

    Donc personnellement je ne vais pas perdre du temps pour refaire ce que j'ai déjà fait, d'autant plus qu'il te suffit de dézipper le dossier proposé en téléchargement et le poser sur ton serveur pour choisir des exemples complets déjà fonctionnels, et d'autant plus que les fonctionnalités du module font tout ce que ton script peut faire (Drag and Drop etc.) et beaucoup plus encore avec un système simplifié pour la configuration.

    De ton côté tu gagnerais aussi du temps. Peut-être certains prendront le temps de compléter ce tuto (que tu utilise) pour faire la partie serveur, mais c'est pas certain car cela prend du temps.

  19. #19
    Invité
    Invité(e)
    Par défaut
    Faisant suite à ton retour courriel donc j'ai essayé
    d'utiliser le folder complet ajax/php via Wamp server
    toutefois il n'y a pas la possibilité de visualiser les exemples .php
    car un retour d'erreur d'alinéa de codage s'inscrit donc je ne peux
    que visualiser les explications texte .
    C'est pour cela que je voulais t'envoyer ma mise en page afin
    que tu puisses peut-être trouver la possibilité d'utiliser
    ce système de type Drag and Drop via cette pagination .
    Merci pour ta compréhension .
    En te souhaitant une excellente semaine .

  20. #20
    Expert éminent sénior

    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2010
    Messages
    5 380
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2010
    Messages : 5 380
    Points : 10 410
    Points
    10 410
    Par défaut
    Je veux bien t'aider pour faire fonctionner le module d'upload, mais comme ce n'est pas ici le bon endroit, je te donne la réponse là.

Discussions similaires

  1. Demande d'aide pour Drag and Drop
    Par Benusko dans le forum Frameworks Web
    Réponses: 0
    Dernier message: 25/09/2014, 11h09
  2. [XL-2010] Aide sur Drag and drop entre x ListBox
    Par jacky72 dans le forum Macros et VBA Excel
    Réponses: 0
    Dernier message: 24/05/2014, 00h32
  3. Transfert multiples de fichier
    Par Joretapo17 dans le forum Windows
    Réponses: 1
    Dernier message: 09/03/2013, 00h56
  4. Aide pour Drag and Drop
    Par 3logy dans le forum ActionScript 3
    Réponses: 1
    Dernier message: 08/09/2009, 11h09
  5. Savoir ou est deposé un fichier dans un drag and drop ?
    Par mkdual dans le forum API, COM et SDKs
    Réponses: 2
    Dernier message: 24/08/2005, 18h52

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo