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

사용자 <input type="file">가 HTML 요소에서 찾아보기 버튼을 클릭 할 때 기본 OS 파일 선택기에서 선택할 수있는 파일 유형을 제한하고 싶습니다 . 불가능하다는 느낌이 들지만 해결책 이 있는지 알고 싶습니다 . 전적으로 HTML과 JavaScript 만 유지하고 싶습니다. 아니 플래시하시기 바랍니다.

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

그러나 여전히 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 요청을 작성하여 파일을 계속 업로드 할 수 있습니다.

입력 태그에 대한 accept 속성이 있습니다. 그러나 어떤 식 으로든 신뢰할 수는 없습니다. 브라우저는이 파일을 "제안"으로 취급 할 가능성이 높습니다. 즉, 파일 관리자에 따라 원하는 유형 만 표시하는 사전 선택 항목이 사용자에게 있습니다. 여전히 "모든 파일"을 선택하고 원하는 파일을 업로드 할 수 있습니다.

예를 들면 다음과 같습니다.

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

HTML5 사양 에서 더 읽기

사용자가 올바른 파일을 찾을 수 있도록 "도움말"로만 사용해야합니다. 모든 사용자는 원하는 모든 요청을 서버로 보낼 수 있습니다. 항상 서버 측의 모든 것을 검증해야합니다.

대답은 그래서 : 더 당신은 제한 할 수 없습니다 ,하지만 당신은 할 수 사전 선택을 설정하지만 당신은 할 수 에 의존.

대안으로 또는 추가로 JavaScript를 사용하여 파일 이름 (입력 필드 값)을 확인하여 유사한 작업을 수행 할 수 있지만 이것은 보호 기능을 제공하지 않으며 사용자를 쉽게 선택할 수 없기 때문에 의미가 없습니다. 잠재적으로 웹 마스터가 자신을 보호한다고 생각하도록 속이고 보안 허점을 엽니 다. 대체 파일 확장자 (예 : jpg 대신 jpeg), 대문자 또는 파일 확장자가없는 (Linux 시스템에서 일반적으로 사용되는) 사용자에게는 문제가 될 수 있습니다.

change이벤트를 사용하여 사용자가 무엇을 선택하는지 모니터링하고 해당 시점에서 파일이 허용되지 않음을 알릴 수 있습니다. 표시되는 실제 파일 목록을 제한하지는 않지만 제대로 지원되지 않는 accept속성 외에도 클라이언트 측에서 수행 할 수있는 가장 가까운 목록입니다 .

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

JSFiddle

그래, 너가 맞아. HTML로는 불가능합니다. 사용자는 원하는 파일을 선택할 수 있습니다.

확장명에 따라 파일을 제출하지 않도록 JavaScript 코드를 작성할 수 있습니다. 그러나 이것이 악의적 인 사용자가 자신이 원하는 파일을 제출하는 것을 막을 수는 없다는 것을 명심하십시오.

다음과 같은 것 :

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

HTML 코드 :

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

기술적으로 요소 에 accept속성 ( html5 대신 )을 지정할 수 input있지만 제대로 지원되지 않습니다.

속성 input과 함께 태그 사용accept

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

최신 브라우저 호환성 표를 보려면 여기를 클릭 하십시오

여기에서 라이브 데모

이미지 파일 만 선택하려면 이것을 사용할 수 있습니다 accept="image/*"

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

여기에서 라이브 데모

gif, jpg 및 png 만 표시되며 Chrome 버전 44의 화면 캡처

나는 이것이 조금 늦다는 것을 안다.

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

당신은 실제로 자바 스크립트로 그것을 할 수 있지만 js는 클라이언트 측이라는 것을 기억하십시오. 따라서 당신이 반드시 특정 유형의 파일을 피하고 (당신이 말한대로 제한하거나 제한하려는 경우) 반드시 업로드 할 수있는 파일 유형을 "경고"할 것입니다. 서버 쪽에서하십시오.

서버 측 유효성 검사를 시작하려면 이 기본 튜트를 보십시오 . 전체 자습서 방문 이 페이지를 .

행운을 빕니다!

이전 답변에서 언급했듯이 주어진 파일 형식에 대해서만 파일을 선택하도록 사용자를 제한 할 수는 없습니다. 그러나 html의 파일 속성에 accept 태그를 사용하는 것이 정말 편리합니다.

확인을 위해, 우리는 서버 측에서 그것을 할 수 있습니다. 우리는 또한 js의 클라이언트 측에서 할 수 있지만 그 완벽한 솔루션은 아닙니다. 우리는 서버 측에서 유효성을 검사해야합니다.

이러한 요구 사항에 대해서는 struts2 Java 웹 애플리케이션 개발 프레임 워크를 선호합니다. 내장 된 파일 업로드 기능을 사용하여 struts2 기반 웹 앱에 파일을 업로드하는 것은 매우 쉬운 일입니다. 응용 프로그램에서 허용 할 파일 형식을 언급하면 ​​나머지는 프레임 워크 자체의 핵심에 의해 처리됩니다. 당신은 스트럿 공식 사이트에서 그것을 확인할 수 있습니다.

다음을 제안 할 수 있습니다.

• 사용자가 기본적으로 이미지 파일을 선택하도록하려면 accept = "image / *"를 사용하십시오.

  <input type="file" accept="image/*" />

• 특정 이미지 형식에 제한하려면 다음 받아 사용 = "이미지 / BMP 이미지 / JPEG 이미지 / PNG"

  <input type="file" accept="image/bmp, image/jpeg, image/png" />

• 특정 유형으로 제한하려면 accept = ". bmp, .doc, .pdf"를 사용하십시오.

  <input type="file" accept=".bmp, .doc, .pdf" />

• 파일 파일러를 모든 파일로 변경하도록 사용자를 제한 할 수는 없으므로 항상 스크립트 및 서버에서 파일 유형의 유효성을 검증하십시오.