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

JavaScript Discussion :

V�rifier l'extension et la taille d'un fichier avant l'upload


Sujet :

JavaScript

  1. #1
    Membre �clair�
    Profil pro
    Inscrit en
    Mars 2009
    Messages
    348
    D�tails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2009
    Messages : 348
    Par d�faut V�rifier l'extension et la taille d'un fichier avant l'upload
    bonjour a tous
    j ai un copain qui m a gentiment fourni un code pour uploader des images
    malheureusement je n ai plus de ses nouvelles
    et j aurais souhaiter pouvoir afficher des alert si le format n est pas une image ou si la taille est trop grande

    c est la derni�re chose qui me manque pour finaliser mon site
    et n y connaissant rien en javascript
    je viens demander votre aide

    voici le code du bouton qui envois l image

    Code html : S�lectionner tout - Visualiser dans une fen�tre � part
      <button type="button" name="photo" value="Upload" onclick="submitUploadFileForm()" class="btn btn-primary btn-lg" style="width: 100px;height: 50px;color: #FFF;">Envoyer</button>

    et le code javascript

    Code html : S�lectionner tout - Visualiser dans une fen�tre � part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
        <script>
            var pseudo = '<?php echo $pseudo;?>';
            var id = '<?php echo $id ;?>';
            console.log('ID', id, 'PSEUDO', pseudo); // pour voir si les variables se remplissent bien dans la console;..
            function _(el) {
                return document.getElementById(el);
            }
            
            function uploadFile() {
                var file = _("photo").files[0];
                var input_contenu = _("contenu");
                var contenu = input_contenu.value;
                var formdata = new FormData();
                formdata.append("photo", file);
                formdata.append("pseudo", pseudo);
                formdata.append("id", id);
                formdata.append("contenu", contenu);
                //le temps des tests : 
                //alert('pseudo:' + pseudo + '  id: ' + id+ '  contenu: ' + contenu);
                console.log('ID', id, 'PSEUDO', pseudo, 'CONTENU', contenu); // pour voir si les variables se remplissent bien dans la console;..
                var ajax = new XMLHttpRequest();
                ajax.upload.addEventListener("progress", progressHandler, false);
                ajax.addEventListener("load", completeHandler, false);
                ajax.addEventListener("error", errorHandler, false);
                ajax.addEventListener("abort", abortHandler, false);
                ajax.open("POST", "cible-fichier.php"); // http://www.developphp.com/video/JavaScript/File-Upload-Progress-Bar-Meter-Tutorial-Ajax-PHP
                //use file_upload_parser.php from above url
                ajax.send(formdata);
            }
     
            function progressHandler(event) {
                _("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;
                var percent = (event.loaded / event.total) * 100;
                _("progressBar").value = Math.round(percent);
                _("status").innerHTML = Math.round(percent) + "% uploaded... please wait";
            }
     
            function completeHandler(event) {
                let res = typeof(event.target.responseText) != 'undefined' ? JSON.parse(event.target.responseText) : "";
                document.getElementById("photo").value = "";
                document.getElementById("contenu").value = "";
                let message = typeof(res.message) != 'undefined' ? res.message : "";
                let error = typeof(res.error) != 'undefined' ? res.error : null;
                _("status").innerHTML = error ? error : messagepas bon ;
                _("progressBar").value = 0; //wil clear progress bar after successful upload
            }
     
            function errorHandler(event) {
                _("status").innerHTML = "Upload Failed";
            }
     
            function abortHandler(event) {
                _("status").innerHTML = "Upload Aborted";
            }
     
    function submitUploadFileForm(){
      if (document.getElementById('form_upload').reportValidity()) {
        uploadFile();
      }
    }
        </script>

  2. #2
    Expert confirm�

    Homme Profil pro
    D�veloppeur Web
    Inscrit en
    Septembre 2010
    Messages
    5 418
    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 418
    Par d�faut
    Salut,

    Dans ton javascript, apr�s la d�finition de "var file", fais console.log(file) et tu devrais avoir des informations sur le fichier dans la console du navigateur, notamment son type et son poids. Ensuite plut�t qu'une alerte, il vaudrait mieux renvoyer l'information dans un �l�ment html sous ton bouton d'upload.

    Mais quitte � utiliser du code que tu ne ma�trise pas, tu pourrais aussi utiliser ce module d'upload qui propose des exemples directement fonctionnels aussi bien c�t� javascript que php. L'avantage c'est que le contr�le des extensions et du poids des fichiers est d�j� programm�, il te suffit de prendre mod�le sur les exemples existants pour configurer la classe javascript d'upload par exemple:
    Code javascript : S�lectionner tout - Visualiser dans une fen�tre � part
    1
    2
    up.config.filesExtensions = ['jpg','jpeg','png','gif'];// Configure les extensions autorisées
    up.config.fileSizeMax = '10 Mo';// Configure la taille maximale du fichier à 10Mo
    Pour le reste tu pourras aussi faire afficher tr�s facilement une vignette de pr�visualisation de l'image d�s sa s�lection. Le code est �galement compatible avec l'upload multiple, et tu pourras ajouter autant de champs que tu veux dans ton formulaire d'upload (de fa�on traditionnelle avec des input dans le html), plut�t que de les rajouter au cas par cas dans le code javascript comme c'est actuellement le cas dans ton code pour l'id, le pseudo et le contenu.

    Bref le module d'upload est beaucoup plus souple et plus complet, tu disposes aussi du retour d'informations en temps r�el, certains exemples proposent le recadrage de l'image avant upload, un syst�me de notation de fichiers (�galement compatible avec l'upload multiple) etc. Et si besoin tu peux aussi t�l�charger des tr�s gros fichiers puisque le module permet de surpasser les configurations serveur "upload_max_filesize", "post_max_size" et "max_file_uploads" de php.

  3. #3
    Membre �clair�
    Profil pro
    Inscrit en
    Mars 2009
    Messages
    348
    D�tails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2009
    Messages : 348
    Par d�faut
    salut
    un grand merci pour cette r�ponse
    je viens de t�l�charger le script pour l upload
    mais je ne comprends pas trop comment je vais pouvoir l adapter a ma structure

    je m explique j ai cr�e un site de p�che ou chaque membre peux poster sa journ�e de p�che et bien entendu ajouter des images sur sa sortie
    donc il n est pas possible au p�cheur A d ajouter des images sur la sortie de p�che du p�cheur B

    il est �vident que chaque p�cheur peux poster autant de journ�e de p�che qu il veux et que tout le monde peux visualiser les journ�es de p�che et les photos de tout le monde

  4. #4
    Expert confirm�

    Homme Profil pro
    D�veloppeur Web
    Inscrit en
    Septembre 2010
    Messages
    5 418
    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 418
    Par d�faut
    Salut,

    Oui ok mais cela ne change rien. Dans le formulaire qui te convient le mieux, il te suffit de rajouter des champs, par exemple <input type="hidden" name="pseudo" value="<?=$pseudo?>"> et dans le code serveur c�t� php (destination de la requ�te ajax) tu pourras r�cup�rer $pseudo = $_POST['pseudo'];. L� j'ai donn� l'exemple d'un champ cach� mais �a fonctionne pour tout type de champ.

    Il n'y a que pour les champs de type radio dans un upload multiple qu'il faut faire attention et attribuer la classe "UpAbci_inputInfosFileUnic" sur l'input en question, pour pouvoir s�lectionner diff�rents boutons radios pour les diff�rents fichiers (ou photos), mais � part ce cas particulier tu peux ajouter des champs comme tu veux de fa�on traditionnelle comme dans tout formulaire html et la classe d'upload javascript se chargera de les envoyer vers le serveur en m�me temps que le fichier correspondant.

    Dans ton cas, l'autre avantage d'utiliser ce module d'upload par rapport � ton script initial c'est que les p�cheurs pourront ajouter plusieurs photos en m�me temps, tout en commentant individuellement chaque photo. Il te suffit d'ajouter un input ou un textarea � l'int�rieur du bloc html ayant la classe "UpAbci_infosFile" (dans le formulaire) et ce champ sera associ� � la photo correspondante, y compris pour un upload multiple. Bien entendu tu peux ajouter autant de champs que tu veux, un pour une l�gende et un pour les commentaires plus d�taill�es.

    Au besoin pour aller encore plus loin, il y a �galement le fichier d'exemple "UploadAjaxABCI_Champs_Sup_Notation.php" pour un syst�me de notation de fichiers avec des �l�ments graphiques, coeurs et �toiles. Sans m�me les utiliser c'est dans ce fichier que tu trouveras tous les d�tails des diff�rentes possibilit�s pour ajouter des champs dans le formulaire.

  5. #5
    Membre �clair�
    Profil pro
    Inscrit en
    Mars 2009
    Messages
    348
    D�tails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2009
    Messages : 348
    Par d�faut
    salut
    un tout tres grand merci pour ces explications
    je vais analyser cela des que j aurais un peu plus de temps
    en attendant encore un grand merci pour la solution

+ R�pondre � la discussion
Cette discussion est r�solue.

Discussions similaires

  1. V�rifier taille d'un fichier avant upload
    Par libuma dans le forum D�veloppement Web en Java
    R�ponses: 1
    Dernier message: 05/08/2010, 16h08
  2. R�ponses: 3
    Dernier message: 26/01/2010, 12h50
  3. V�rifier taille d'un fichier avant upload
    Par Guillaume_Caldera dans le forum G�n�ral JavaScript
    R�ponses: 8
    Dernier message: 17/11/2009, 09h32
  4. V�rifier l'extension et le format d'un fichier image
    Par tagada_tagada dans le forum Langage
    R�ponses: 7
    Dernier message: 19/11/2008, 03h59
  5. V�rifier l'extension et la taille
    Par kevinf dans le forum Langage
    R�ponses: 14
    Dernier message: 21/11/2006, 19h20

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