파일 업로드 유형 만 이미지로 제한 이미지

Question

이미지 파일을 업로드하는 데 HTML 양식을 사용하고 있습니다. 이제 파일 유형을 허용하기 위해 서버 측 유효성 검사를 사용하고 있습니다. 하지만 난뿐만 아니라 클라이언트 쪽에서 그것을 확인하고 싶습니다. 우리가 파일을 선택할 때 다른 파일 형식이 회색으로 변하는 웹 사이트를 보았습니다. 나는 그것이 멋진 옵션이라고 생각한다. 내가 구글을 걷는 때 나는이

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

을 발견하지만 난이 무엇입니까이와 나뿐만 아니라 다른 파일을 "모든 파일"옵션을 활성화 할 수 있습니다 문신 있도록. 나는 그것을 필요로하지 않는다. 무슨 일이 있어도 사용자는 컴퓨터에서 이미지 파일 만 선택할 수 있어야합니다. 너희들이 이것을하는 방법을 알고 있니?

이것은 회색으로 표시 한 것입니다.

Answer 1

이 accept 속성은 HTML5 기능이므로 많은 브라우저에서 지원되지 않습니다.

내가 기억하는 한 더 나은 파일 업로드 대화 상자 (파일 유형 필터, 여러 파일 ...)를 얻는 유일한 방법은 플래시 객체를 사용하는 것입니다.

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