Controlla l'estensione del file e avvisa l'utente se non è il file immagine

Question

Ho bisogno di aiuto per aggiungere una riga di codice per controllare che il file sia immagine, per controllare l'estensione. Questo è il mio codice che uso per indicare i progressi del caricamento delle immagini. Lo faccio in php e l'utente non può caricare alcun file tranne .jpg .jpeg .gif e .png ma non riceve un messaggio che il file non è caricato. Quando aggiungo il codice javascript per il caricamento progressivo, il mio messaggio php che ho creato non viene più visualizzato.

Questo è il mio codice javascript di file 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); 

}); 

E questo è il mio modulo per il caricamento dei 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> 

ho bisogno in quel codice javascript anche per verificare sia file è Immagine. Per consentire le estensioni jpg, jpeg, png e gif e bloccarne altre. Per avvisare l'utente se sta tentando di caricare altri tipi di file.

Answer 1

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

Answer 2

stile darvi classe nome-jsp

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

a vostra JSP o HTML si dà id = "cekJpg" (in file di caricamento click non scegliere il file)

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

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