" " " 를 할 때 합니다." " " 를 할 때 합니다." " " 를 할 때 합니다.

" " " 를 할 때 합니다.

가 [참조(Browse)]에서 [(Browse)]때 파일 할 수 버튼을 클릭했을 때 네이티브 OS 파일 선택기에서 선택할 수 있는 파일 형식을 제한하고 싶다.<input type="file">불가능하다고 느끼지만 해결책이 있는지 알고 싶습니다.플래시는 사용하지 않고 HTML과 JavaScript만 사용하고 싶습니다.

엄밀히 말하면 대답은 '아니오'입니다.개발자는 사용자가 프런트엔드 검증(HTML/JavaScript)을 사용하여 어떤 유형 또는 확장자 파일도 업로드하지 못하도록 할 수 없습니다.

그러나 여전히, 수용 속성은<input type = "file">는 사용자의 브라우저/OS에서 제공되는 파일 선택 대화 상자에서 필터를 제공하는 데 도움이 됩니다.를 들어 '예'라고 하면,

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

는 .xls 또는 .xlsx 이외의 파일을 필터링 하는 방법을 제공합니다.MDN 페이지에는input놀랍게도, 파이어폭스에서는 42버전이 되어서야 사용할 수 있었습니다.IE 10+, 엣지 크롬

따라서 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) 동작:file type filter 드롭다운에는 여기에 기재된 파일타입이 표시되지만 드롭다운의 기본값은 아닙니다.기본 필터는 다음과 같습니다.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는 작성자에게 MIME 타입과 대응하는 확장자를 모두 지정할 것을 권장합니다.accept기여하다.따라서 최선의 접근법은 다음과 같습니다.

<!-- Right approach: Use both file extensions and their 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: 여기.

★★★★★★★★★★★★★★★★★★:MIME 형 mime mime

중요: 사용방법accept attribute는 관심 있는 유형의 파일을 필터링하는 방법만 제공합니다.브라우저에서도 사용자는 모든 유형의 파일을 선택할 수 있습니다.추가(클라이언트 측) 체크를 실시합니다(JavaScript를 사용하는 것도 한 가지 방법입니다).또, 파일 확장자와 바이너리 시그니처(ASP)의 양쪽 모두를 사용하는 MIME 타입의 편성을 사용하고, 서버상에서 확실히 파일 타입을 검증할 필요가 있습니다.NET, PHP, Ruby, Java).보다 견고한 서버측 검증을 실시하려면 , 파일 타입의 설정 가능과 그 매직 넘버를 참조할 수도 있습니다.

다음은 파일 업로드 및 보안에 대한 세 가지 유용한 정보입니다.

편집: 바이너리 서명을 사용한 파일 형식 검증도 HTML5 파일 API를 사용하여 JavaScript를 사용하여 클라이언트 측에서 실행할 수 있지만 악의적인 사용자는 여전히 커스텀 HTTP 요청을 통해 파일을 업로드할 수 있기 때문에 서버에서 파일을 검증해야 합니다.

입력 태그에는 accept 속성이 있습니다.하지만 어떤 식으로든 믿을 수 있는 것은 아니다.브라우저에서는 "제안"으로 취급할 가능성이 높으며, 이는 파일 관리자에 따라 사용자가 원하는 유형만 표시하는 사전 선택사항이 있음을 의미합니다.그래도 "모든 파일"을 선택하여 원하는 파일을 업로드할 수 있습니다.

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

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

HTML5 사양 상세보기

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

따라서 대답은 "아니오"입니다.단, 사전 선택은 할 수 있지만 의존할 수는 없습니다.

또는 추가로 JavaScript에서 파일 이름(입력 필드의 값)을 확인하는 것으로 유사한 작업을 수행할 수 있습니다. 그러나 이는 보호 기능을 제공하지 않으며 사용자의 선택도 쉽지 않기 때문에 의미가 없습니다.웹마스터에게 자신이 보호받고 있다고 생각하게 하고 보안상의 구멍을 열어줄 가능성이 있습니다.대체 파일 확장자(jpg 대신 jpg), 대문자 또는 파일 확장자가 없는 사용자(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>

기술적으로는 (html5의 대체) Atribute를 지정할 수 있습니다.input요소가 제대로 지원되지 않습니다.

"accept" 속성을 파일 선택 상자에서 필터로 사용할 수 있습니다."accept"를 사용하면 "suffix" 또는 "MIME 유형"에 따라 입력 파일을 필터링할 수 있습니다.

1. 접미사에 근거한 필터:여기서 "accept" 속성은 확장자가 .jpeg인 파일만 선택할 수 있습니다.

<input type="file" accept=".jpeg" />

2. "파일 형식"에 따라 필터링 "accept" 속성을 사용하면 "image/jpeg" 유형의 파일을 선택할 수 있습니다.

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

중요:mem 타입을 변경하지 않고 파일 확장자를 변경하거나 삭제할 수 있습니다.예를 들어 확장자가 없는 파일을 가질 수 있지만 이 파일의 형식은 "image/jpeg"일 수 있습니다.따라서 이 파일은 accept=".filter."를 통과할 수 없지만 accept="image/filter"는 통과할 수 있습니다.

3. * 를 사용하여 모든 종류의 파일을 선택할 수 있습니다.예를 들어, 아래 코드는 모든 종류의 이미지를 선택할 수 있도록 합니다.예를 들어 "image/png" 또는 "image/jpeg" 또는 ... 입니다.모두 허용됩니다.

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

4. select 속성의 "또는 연산자"로서 cama ( , )를 사용할 수 있습니다.예를 들어, 모든 종류의 이미지 또는 PDF 파일을 허용하려면 다음 코드를 사용할 수 있습니다.

<input type="file" accept="image/* , application/pdf" />

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

실제로 jascript를 사용하여 실행할 수 있지만 js는 클라이언트 측임을 기억하십시오.따라서 업로드할 수 있는 파일 유형을 "경고"해야 합니다.특정 유형의 파일을 피하려면 서버 측을 반드시 실행해야 합니다.

서버측 검증을 개시하고 싶은 경우는, 이 기본적인 tut을 참조해 주세요.전체 튜토리얼은 이 페이지를 참조하십시오.

행운을 빕니다.

이전 답변에서 설명한 바와 같이 사용자가 지정된 파일 형식에 대해서만 파일을 선택하도록 제한할 수 없습니다.그러나 html의 파일 속성에 accept 태그를 사용하면 매우 편리합니다.

검증은 서버 측에서 해야 합니다.js에서는 클라이언트 측에서도 할 수 있지만, 이것은 실수 없는 솔루션이 아닙니다.서버 측에서 검증해야 합니다.

이러한 요건에는 struts2 Java 웹 어플리케이션 개발 프레임워크를 매우 선호합니다.내장 파일 업로드 기능으로 struts2 기반 웹 앱에 파일을 업로드하는 것은 식은 죽 먹기입니다.어플리케이션에서 수용하고 싶은 파일 형식을 언급하기만 하면 나머지는 모두 프레임워크 자체의 핵심에서 처리됩니다.Struts 공식 사이트에서 확인할 수 있습니다.

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

• 기본적으로 사용자가 이미지 파일 중 하나를 선택하도록 해야 하는 경우 use accept="image/*"

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

• 특정 이미지 유형으로 제한하려면 accept="image/bmp, image/mp, image/png"를 사용하십시오.

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

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

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

• 사용자가 파일러를 모든 파일로 변경하도록 제한할 수 없으므로 항상 스크립트 및 서버에서 파일 형식을 확인하십시오.

accept Atribute 사용의 이전 답변을 바탕으로 File API를 사용하여 이를 수행할 수 있습니다.또한 FileReader를 사용하여 로컬 구문 분석 또는 데이터 처리를 수행할 때 파일 내용에 액세스할 수 있습니다.

먼저 입력 요소를 만듭니다.여기서 파일유형을 accept 속성에 적용할 수 있지만 예에서는 모든 파일유형을 선택할 수 있습니다.

<input type="file" name="upload" accept="*" multiple>

다음으로 입력 요소에 대한 '변경' 이벤트를 들어보겠습니다.

var upload = document.querySelector('input[type="file"]');
upload.addEventListener('change', function() {});

함수 내에서 입력의 files 객체에 액세스할 수 있습니다.

var files = this.files

배열이 아니기 때문에 개체를 반복할 수는 없지만 목록에서 파일 개체에 액세스하려면 item() 함수를 사용할 수 있습니다.

for (var i = 0; i < files.length; i++) {
    var file = files.item(i);
}

이제 파일 개체가 생성되었으므로 파일 개체의 이름과 유형 속성에 액세스하고 여기에서 파일을 확인할 수 있습니다.이 경우 .txt 파일인지 확인하고 파일이 아닌 경우 메시지를 인쇄합니다.파일 형식의 정규식 패턴에 대해 이름을 확인하거나 MIME 유형에 대해 유형을 확인할 수 있습니다.

if (!file.name.match(/.txt$/i) || file.type != 'text/plain') {
    console.log(file.name + ' is not a .txt file.');
}

var upload = document.querySelector('input[type="file"]');
upload.addEventListener('change', function() {
    var files = this.files;
    for (var i = 0; i < files.length; i++) {
        var file = files.item(i);
        if (!file.name.match(/.txt$/i) || file.type != 'text/plain') {
            console.log(file.name + ' is not a .txt file.');
        }
    }
});

<input type="file" name="upload" accept="*" multiple>

파일 API는 최신 브라우저에서 매우 잘 지원됩니다.이를 accept Atribut과 조합하면 로컬 사용자가 업로드에서 선택할 수 있는 항목을 쉽게 필터링하여 유용한 피드백을 제공할 수 있습니다.파일을 업로드 하는 경우에도 백엔드의 파일유형을 확인하고 검증해야 합니다.

언급URL : https://stackoverflow.com/questions/4328947/limit-file-format-when-using-input-type-file