web-dev-qa-db-fra.com

Vérifier l'extension du fichier et alerter l'utilisateur s'il ne s'agit pas d'un fichier image

J'ai besoin d'aide pour ajouter une ligne de code afin de vérifier si le fichier est une image, pour vérifier son extension. C'est mon code que j'utilise pour indiquer la progression du téléchargement des images. Je le fais en php et l'utilisateur ne peut télécharger aucun fichier sauf .jpg .jpeg .gif et .png mais il ne reçoit pas de message lui indiquant que le fichier n'est pas téléchargé. Lorsque j'ajoute du code javascript pour le chargement de la progression, mon message php que je crée ne s'affiche plus.

Ceci est mon code de fichier javascript Upload.js:

 var handleUpload = function(event) {
    event.preventDefault();
    event.stopPropagation();

    var fileInput = document.getElementById('image_id');

    var data = new FormData();

    data.append('javascript', true);

        if(fileInput.files[0].size > 1050000) {
        document.getElementById("image_id").innerHTML = "Image too big (max 1Mb)";
        alert('Fotografija koju žElite dodati je veća od 1Mb!');
        window.location="upload_images.php"
        return false;
        }

    for (var i =0; i < fileInput.files.length; ++i) {
        data.append('image', fileInput.files[i]);
    }

    var request = new XMLHttpRequest();

    request.upload.addEventListener('progress', function(event) {
        if (event.lengthComputable) {
            var percent = event.loaded / event.total;
            var progress = document.getElementById('upload_progress');

            while (progress.hasChildNodes()) {
                progress.removeChild(progress.firstChild);
            }

            progress.appendChild(document.createTextNode(Math.round(percent * 100) + ' %'));
        }
    });

    request.upload.addEventListener('load', function(event) {
        document.getElementById('upload_progress').style.display = 'none';
    });

    request.upload.addEventListener('error', function(event) {
        alert('Dodavanje slika nije bilo uspješno! Pokušajte ponovo.');
    });

    request.addEventListener('readystatechange', function(event) {

        if (this.readyState == 4) {
            if(this.status == 200) {
                var links = document.getElementById('uploaded');

                window.location="upload_images.php?success"
                console.log(this.response); 
            } else {
                console.log('Server replied with HTTP status ' + this.status);
            }
        }

    });

    request.open('POST', 'upload_images.php');
    request.setRequestHeader('Cache-Control', 'no-cache');

    document.getElementById('upload_progress').style.display = 'block';

    request.send(data);
}

window.addEventListener('load', function(event) {
    var submit = document.getElementById('submit');
    submit.addEventListener('click', handleUpload);

});

Et voici mon formulaire de téléchargement de fichier:

<div id="uploaded">

</div>
<div>
<form action="" method="post" enctype="multipart/form-data">
<input name="image" id="image_id" type="file" size="25" value="Odaberi sliku" />
<input type="submit" id="submit" value="Dodaj Foto"/>
</form>
</div>
<div class="upload_progress" id="upload_progress"></div>

J'ai aussi besoin de ce code javascript pour vérifier si le fichier est une image. Autoriser les extensions jpg, jpeg, png et gif et bloquer les autres. Pour alerter l'utilisateur s'il tente de télécharger un autre type de fichier.

javascriptimagefile-upload
11
Mirsad Batilovic
if (!fileInput.files[0].name.match(/.(jpg|jpeg|png|gif)$/i))
    alert('not an image');
35
monkeyinsight

style que vous donnez à la classe name-jsp

"Choose file",input:true,icon:true,classButton:"btn",classInput:"input-large name-jsp"

à votre jsp ou html vous donnez id = "cekJpg" (au clic télécharger le fichier pas choisir le fichier)

<input id="cekJpg" type="submit" class="btn btn-primary" value="Upload image">

à javascript

//if click button upload image with id="cekJpg"
$("#cekJpg").on('click', function (e) {
    //get your format file
    var nameImage = $(".name-jsp").val();
    //cek format name with jpg or jpeg
    if(nameImage.match(/jpg.*/)||nameImage.match(/jpeg.*/)){
        //if format is same run form
    }else{
        //if with e.preventDefault not run form
        e.preventDefault();
        //give alert format file is wrong
        window.alert("file format is not appropriate");
    }
});
0
lucky kurniawan