javascript 如果不是图像文件，请检查文件扩展名并提醒用户

Check file extension and alert user if isn't image file

提问by Mirsad Batilovic

I need help to add some line of code to check is file is image, to check extension. This is my code that I use for indicate progress of uploading images. I do that in php and user can't upload any file except .jpg .jpeg .gif and .png but he doesn't get a message that file isn't uploaded. When I add javascript code for progress upload, my php message taht i create doesn't display anymore.

我需要帮助添加一些代码行来检查文件是图像，检查扩展名。这是我用于指示上传图像进度的代码。我在 php 中这样做，用户不能上传除 .jpg .jpeg .gif 和 .png 之外的任何文件，但他没有收到文件未上传的消息。当我为进度上传添加 javascript 代码时，我创建的 php 消息不再显示。

This is my javascript upload.js file code:

这是我的 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);

});

And this is my form for uploading file:

这是我上传文件的表格：

<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>

I need in that javascript code also to check is file is image. To allow jpg, jpeg, png and gif extensions and block others. To alert user if he trying to upload other kind of file.

我还需要在该 javascript 代码中检查文件是否为图像。允许 jpg、jpeg、png 和 gif 扩展名并阻止其他人。提醒用户是否尝试上传其他类型的文件。

回答by monkeyinsight

if (!fileInput.files[0].name.match(/.(jpg|jpeg|png|gif)$/i))
    alert('not an image');

回答by lucky kurniawan

style you give class name-jsp

你给类名的样式-jsp

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

at your jsp or html you give id="cekJpg"(at click upload file not choose file)

在你的 jsp 或 html 你给 id="cekJpg"（点击上传文件而不是选择文件）

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

at javascript

在 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");
    }
});