ファイル拡張子を確認し、画像ファイルがない場合は警告するユーザ

Question

拡張子を確認するためにファイルがイメージであることを確認するコード行を追加するのに助けが必要です。これは画像のアップロードの進行状況を示すために使用するコードです。私はPHPでそれを行い、ユーザーは.jpg .jpeg .gifと.png以外のファイルはアップロードできませんが、ファイルがアップロードされていないというメッセージは表示されません。進捗状況をアップロードするためのjavascriptコードを追加すると、作成したPHPメッセージは表示されなくなります。

これは私の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); 

}); 

そして、これはアップロードするファイルのための私の形式である：私もチェックしているJavaScriptコードに必要

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

ファイルがあるさ画像。 jpg、jpeg、png、gif拡張子を許可し、他の拡張子をブロックする。彼が他の種類のファイルをアップロードしようとしているかどうかをユーザーに警告します。

Answer 1

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

Answer 2

スタイルは、あなたのJSPでクラス名-JSPに

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

を与えるか、またはあなたが

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

で（クリックアップロードファイルでファイルを選択していない）のid = "cekJpg" を与えるhtmlの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"); 
    } 
});