[html] <input type =“file”>을 사용할 때 파일 형식을 제한 하시겠습니까?

엄밀히 말하면 대답은 ‘ 아니오’ 입니다. 개발자 는 사용자가 모든 유형 또는 확장자의 파일을 업로드 하지 못하게 할 수 없습니다 .

그러나 여전히 accept 속성은 <input type = "file">OS의 파일 선택 대화 상자에 필터를 제공하는 데 도움 이 될 수 있습니다. 예를 들어

<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox 42+) -->
<input type="file" accept=".xls,.xlsx" />

.xls 또는 .xlsx 이외의 파일을 필터링하는 방법을 제공해야합니다. element 의 MDN 페이지는 input항상 이것을 지원한다고 말했지만 놀랍게도 Firefox 42에서는 버전 42까지 작동하지 않았습니다. 이것은 IE 10 +, Edge 및 Chrome에서 작동합니다.

따라서 IE 10 이상, Edge, Chrome 및 Opera와 함께 42 세 이상의 Firefox를 지원하려면 쉼표로 구분 된 MIME 유형 목록을 사용하는 것이 좋습니다.

<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox) -->
<input type="file"
 accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" /> 

[ Edge (EdgeHTML) 동작 : 파일 형식 필터 드롭 다운에 여기에 언급 된 파일 형식이 표시되지만 드롭 다운의 기본값은 아닙니다. 기본 필터는 All files (*)입니다.]

MIME 유형에서 별표를 사용할 수도 있습니다. 예를 들면 다음과 같습니다.

<input type="file" accept="image/*" /> <!-- all image types -->
<input type="file" accept="audio/*" /> <!-- all audio types -->
<input type="file" accept="video/*" /> <!-- all video types --> 

W3C 는 작성자가 accept속성 에 MIME 유형과 해당 확장을 모두 지정 하도록 권장 합니다. 따라서 가장 좋은 방법은 다음과 같습니다.

<!-- Right approach: Use both file extensions and corresponding MIME-types. -->
<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox) -->
<input type="file"
 accept=".xls,.xlsx, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" /> 

같은 JSFiddle : here .

참조 : MIME 유형 목록

중요 :accept 속성을 사용하면 관심있는 유형의 파일 만 필터링 할 수 있습니다. 브라우저는 여전히 사용자가 모든 유형의 파일을 선택할 수 있도록 허용합니다. 추가 (클라이언트 측) 검사 수행해야합니다 (자바 스크립트를 사용이 하나 개의 방법이 될 것이다 이 ) 확실히 파일 형식은 서버에 확인해야합니다 (파일 확장자와 이진 서명을 모두 사용하여 MIME 타입의 조합을 사용하여, ASP .NET , PHP , Ruby , Java ). 파일 유형 및 매직 넘버에 대해서는 이 표 를 참조 할 수도 있습니다.보다 강력한 서버 측 검증을 수행합니다.

다음은 세 가지 좋은 읽고 파일 업로드 및 보안에.

편집 : HTML5 File API를 사용하여 확장을 보지 않고 JavaScript를 사용하여 클라이언트 측에서 이진 서명을 사용하여 파일 형식을 확인할 수도 있지만 악의적 인 사용자 때문에 여전히 서버에서 파일을 확인해야합니다 사용자 정의 HTTP 요청을 작성하여 파일을 계속 업로드 할 수 있습니다.

답변

<form>
    <input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />
</form>

var file = document.getElementById('someId');

file.onchange = function(e) {
  var ext = this.value.match(/\.([^\.]+)$/)[1];
  switch (ext) {
    case 'jpg':
    case 'bmp':
    case 'png':
    case 'tif':
      alert('Allowed');
      break;
    default:
      alert('Not allowed');
      this.value = '';
  }
};

<input type="file" id="someId" />

function beforeSubmit()
{
    var fname = document.getElementById("ifile").value;
    // check if fname has the desired extension
    if (fname hasDesiredExtension) {
        return true;
    } else {
        return false;
    }
}

<form method="post" onsubmit="return beforeSubmit();">
    <input type="file" id="ifile" name="ifile"/>
</form>

<input type="file" name="my-image" id="image" accept="image/gif, image/jpeg, image/png" />

<input type="file" name="my-image" id="image" accept="image/*" />

function Validatebodypanelbumper(theForm)
{
   var regexp;
   var extension =     theForm.FileUpload.value.substr(theForm.FileUpload1.value.lastIndexOf('.'));
   if ((extension.toLowerCase() != ".gif") &&
       (extension.toLowerCase() != ".jpg") &&
       (extension != ""))
   {
      alert("The \"FileUpload\" field contains an unapproved filename.");
      theForm.FileUpload1.focus();
      return false;
   }
   return true;
}