ファイルアップロードの種類のみを制限する画像

Question

私はHTML形式を使用して画像ファイルをアップロードしています。今私は、ファイルの種類を許可するサーバー側の検証を使用しています。しかし、私はクライアント側でも検証したい。私はいくつかのウェブサイトで、ファイルを選択するときに他のファイルタイプが灰色になるのを見ました。私はそれがクールな選択肢だと思う。私はグーグルを歩いたとき、私はこの

<input id="my_file_element" type="file" name="file_0" accept="image/*"> 

を見つけましたが、私は取得していますこれで私も他のファイルを「すべてのファイル」オプションを有効にすることができTATなります。私はそれを必要としません。何が起こっても、ユーザーは自分のコンピュータから画像ファイルのみを選択することが許可されるべきです。あなたはこれを行う方法を知っていますか？

これは私がグレー表示で意味したものです。

Answer 1

このaccept属性はHTML5の機能であり、多くのブラウザでサポートされていません。

私が覚えている限り、より良いファイルアップロードダイアログ（ファイルタイプフィルタ、複数のファイルなど）を得る唯一の方法は、Flashオブジェクトを使用することです。

Answer 2

Here is the HTML for image upload, By default it will show image files only in browsing window becauase we have put accept="image/*" . But still we can change it from the dropdown and it will show all files. So the Javascript part validates whether the selected file is an actual image or not. 

<div class="col-sm-8 img-upload-section"> 
    <input name="image3" type="file" accept="image/*" id="menu_images"/> 
    <img id="menu_image" class="preview_img" /> 
    <input type="submit" value="Submit" /> 
</div> 

Here on the change event first we are checking the size of the image. And in the second if condition we are checking whether it is an image file or not. 
this.files[0].type.indexOf("image") will be "-1" if it is not an image file. 

    document.getElementById("menu_images").onchange = function() { 
     var reader = new FileReader(); 
     if(this.files[0].size>528385){ 
      alert("Image Size should not be greater than 500Kb"); 
      $("#menu_image").attr("src","blank"); 
      $("#menu_image").hide(); 
      $('#menu_images').wrap('<form>').closest('form').get(0).reset(); 
      $('#menu_images').unwrap();  
      return false; 
     } 
     if(this.files[0].type.indexOf("image")==-1){ 
      alert("Invalid Type"); 
      $("#menu_image").attr("src","blank"); 
      $("#menu_image").hide(); 
      $('#menu_images').wrap('<form>').closest('form').get(0).reset(); 
      $('#menu_images').unwrap();   
      return false; 
     } 
     reader.onload = function (e) { 
      // get loaded data and render thumbnail. 
      document.getElementById("menu_image").src = e.target.result; 
      $("#menu_image").show(); 
     }; 

     // read the image file as a data URL. 
     reader.readAsDataURL(this.files[0]); 
    };