HTML 입력 =“파일”속성 파일 형식 (CSV) 수락

내 페이지에 파일 업로드 객체가 있습니다.

<input type="file" ID="fileSelect" />

내 바탕 화면에 다음과 같은 Excel 파일이 있습니다.

1. file1.xlsx
2. file1.xls
3. file.csv

나는 파일을 업로드 할 만 보여 .xlsx, .xls, .csv파일을.

이 accept속성을 사용하여 이러한 콘텐츠 유형이 .xlsx& .xls확장을 처리 한다는 것을 알았습니다 ...

accept= application / vnd.openxmlformats-officedocument.spreadsheetml.sheet (.XLSX)

accept= application / vnd.ms-excel (.XLS)

그러나 Excel CSV 파일에 올바른 내용 유형을 찾을 수 없습니다! 어떤 제안?

예 : http://jsfiddle.net/LzLcZ/

글쎄요, 이것은 당황 스럽습니다 ... 나는 내가 찾고있는 해결책을 찾았고 더 간단 할 수 없었습니다. 원하는 결과를 얻기 위해 다음 코드를 사용했습니다. 이것이 미래의 누군가를 돕기를 바랍니다. 도와 주셔서 감사합니다.

<input id="fileSelect" type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />  

유효한 수락 유형 :

대한 CSV 파일 (.csv)로 사용 :

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

대한 엑셀 파일 97-2003 (.XLS), 사용 :

<input type="file" accept="application/vnd.ms-excel" />

대한 엑셀 파일 2007 이상 (.XLSX), 사용 :

<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />

들어 텍스트 파일 (.txt)로 사용 :

<input type="file" accept="text/plain" />

에 대한 이미지 파일 (PNG로 / .JPG / 등), 사용 :

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

대한 HTML 파일 (.HTM, .html)을 사용합니다 :

<input type="file" accept="text/html" />

들어 비디오 파일 (.AVI, .MPG, .MPEG, .MP4), 사용 :

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

들어 오디오 파일 (.MP3, .WAV 등), 사용 :

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

대한 PDF 파일 , 사용 :

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

데모 :
http://jsfiddle.net/dirtyd77/LzLcZ/144/

노트:

Excel CSV 파일 ( .csv) 을 표시하려는 경우 다음을 사용 하지 마십시오 .

• text/csv
• application/csv
• text/comma-separated-values( 오페라에서만 작동 ).

특정 파일 형식 (예 : a WAV또는 PDF) 을 표시하려고 하면 거의 항상 작동합니다 ...

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

요즘에는 파일 확장자 만 사용할 수 있습니다

<input type="file" ID="fileSelect" accept=".xlsx, .xls, .csv"/>

Dom이 속성은 매우 오래되었고 내가 아는 한 최신 브라우저에서는 허용되지 않지만 여기에 대한 대안이 있습니다.

<script type="text/javascript" language="javascript">
function checkfile(sender) {
    var validExts = new Array(".xlsx", ".xls", ".csv");
    var fileExt = sender.value;
    fileExt = fileExt.substring(fileExt.lastIndexOf('.'));
    if (validExts.indexOf(fileExt) < 0) {
      alert("Invalid file selected, valid files are of " +
               validExts.toString() + " types.");
      return false;
    }
    else return true;
}
</script>

<input type="file" id="file" onchange="checkfile(this);" />

물론 그것은 당신이 당신의 필요에 따라이 스크립트를 변경할 수 있습니다 도움이 될 것 같아요.

text/comma-separated-valuesaccept 속성에서 CSV mime-type에 사용 했으며 Opera에서 제대로 작동합니다. text/csv운없이 시도했다 .

제안 된 기능이 작동하지 않는 경우 CSV에 대한 다른 일부 MIME 유형 :

• 텍스트 / 쉼표로 구분 된 값
• text / csv
• 응용 프로그램 / csv
• 응용 프로그램 / 엑셀
• application / vnd.ms-excel
• 응용 프로그램 /vnd.msexcel
• 텍스트 / 모든 텍스트

출처 : http://filext.com/file-extension/CSV

Safari 10에서는 작동하지 않았습니다.

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

대신 이것을 써야했습니다.

<input type="file" accept="text/csv" />

다음을 수행하여 파일의 올바른 내용 유형을 알 수 있습니다.

1) 관심있는 파일을 선택하고

2) 콘솔에서 다음을 실행하십시오.

console.log($('.file-input')[0].files[0].type);

입력에 속성 "multiple"을 설정하여 한 번에 여러 파일의 컨텐츠 유형을 확인하고 다음을 수행 할 수도 있습니다.

for (var i = 0; i < $('.file-input')[0].files.length; i++){
    console.log($('.file-input')[0].files[i].type);
}

속성 수락에는 여러 속성에 일부 문제가 있으며이 경우 올바르게 작동하지 않습니다.

@yogi의 솔루션을 수정했습니다. 또한 파일의 형식이 잘못된 경우 입력 요소 값을 재설정합니다.

function checkFile(sender, validExts) {
    var fileExt = sender.value;
    fileExt = fileExt.substring(fileExt.lastIndexOf('.'));
    if (validExts.indexOf(fileExt) < 0 && fileExt != "") {
        alert("Invalid file selected, valid files are of " +
                 validExts.toString() + " types.");
        $(sender).val("");
        return false;
    }
    else return true;
}

열린 파일 창에서 사용자가 입력 요소에서 accept 속성을 명시 적으로 설정했는지 여부에 관계없이 사용자는 여전히 "모든 파일 ( '*')"옵션을 선택할 수 있기 때문에 사용자 정의 확인 내장 기능이 있습니다.

이제 새로운 html5 입력 유효성 검사 속성을 사용할 수 있습니다 pattern=".+\.(xlsx|xls|csv)".