Sprawdź rozszerzenie pliku i alert użytkownika, jeśli nie jest plik obrazu

Question

Potrzebuję pomocy, aby dodać linię kodu do sprawdzenia, czy plik jest obrazem, aby sprawdzić rozszerzenie. To jest mój kod, którego używam do wskazania postępu przesyłania zdjęć. Robię to w php i użytkownik nie może przesłać żadnego pliku z wyjątkiem .jpg .jpeg .gif i .png, ale nie otrzymuje wiadomości, że plik nie został przesłany. Po dodaniu kodu javascript do przesyłania postępu, mój komunikat php, który utworzę, nie jest już wyświetlany.

To jest mój kod javascript upload.js pliku:

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

}); 

A to moja forma do przesyłania pliku:

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

muszę w tym kodu javascript jest również, aby sprawdzić plik jest obraz. Aby zezwolić na rozszerzenia jpg, jpeg, png i gif oraz blokowanie innych. Aby ostrzec użytkownika, jeśli próbuje przesłać inny rodzaj pliku.

Answer 1

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

Answer 2

styl podać klasę imieniny JSP

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

w swojej JSP lub HTML dajesz id = "cekJpg" (po kliknięciu pliku do przesłania nie wybrać plik)

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

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