HTML 입력="file" 특성 파일 형식 수락(CSV)

HTML 입력="file" 특성 파일 형식 수락(CSV)

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

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

다음 Excel 파일을 바탕화면에 저장합니다.

1. 파일 1.xlsx
2. 파일 1.xls
3. 파일.csv

파일을 업로드하여 표시만 할 수 있도록 합니다..xlsx,.xls, 및.csv파일을 표시합니다.

사용방법accept속성, 이 콘텐츠타입이 처리되어 있는 것을 발견했습니다..xlsx&.xls내선번호...

accept= application/vnd.openxmlformats-officeduction.parametml.시트(.XLSX)

accept= 애플리케이션/vnd.ms-facebook(.X)LS)

그러나 Excel CSV 파일에 적합한 콘텐츠 유형을 찾을 수 없습니다!좋은 의견이라도 있나?

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

이거 창피한데...제가 찾던 솔루션을 찾았는데, 이보다 더 간단할 순 없어요.원하는 결과를 얻기 위해 다음 코드를 사용했습니다.

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

유효한 수락 유형:

CSV 파일(.csv)의 경우 다음을 사용합니다.

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

Excel 파일 97-2003(.xls)의 경우 다음을 사용합니다.

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

Excel 파일 2007+(.xlsx)의 경우 다음을 사용합니다.

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

텍스트 파일(.txt)의 경우:

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

이미지 파일(.png/.jpg/etc)의 경우 다음을 사용합니다.

<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(Opera에서만 작동합니다).

---

특정 파일 유형을 표시하려는 경우(예:WAV또는PDF)는, 이것은 거의 항상 동작합니다.

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

그 이유는 다음과 같습니다.

그application type은 보통 파일을 여는 위치를 의미합니다.예를 들어, 주소 판독기.하지만 이 파일이 업로드되면 브라우저는 앱을 열어 문의하는 것을 신경쓰지 않습니다.그러나 확장자는 MIME과 같은 단어를 입력합니다.image 또는audio파일 유닛에 직접 적용할 수 있습니다.

이 명령어를 사용할 수 있습니다.File DOM 인스턴스따라서 확장 형식 이름을 사용해야 합니다.모바일과 같은 많은 디바이스에서 [파일]를 클릭하면 사용자 메뉴에서 허용되지 않은 파일이 회색으로 제외됩니다.파일을 가지고 즐거운 시간을 보내세요!

요즘은 파일 확장자만 사용하면 됩니다.

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

돔 이 속성은 매우 오래되어 최신 브라우저에서 허용되지 않는 것으로 알고 있습니다. 하지만 여기에 다른 방법이 있습니다. 시도해 보십시오.

<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-valuesCSV mime-type "Accept Attribute" "Accept Attribute" 입니다.해 보았다.text/csv운도 없이

CSV의 다른 MIME-Types가 동작하지 않는 경우는, 다음과 같이 됩니다.

• text/param 구분값
• 텍스트/csv
• 응용 프로그램/csv
• 응용 프로그램 / 응용 프로그램
• 응용 프로그램/vnd.ms-filename
• 응용 프로그램/vnd.msexcel
• 텍스트/임의 텍스트

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

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

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

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

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

예를 들어 CSV 파일은 top-answer 외에 macOS에서는 text/filename으로 보고되지만 Windows에서는 application/vnd.ms-filename으로 보고됩니다.그래서 이걸 씁니다.

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

action atr에서 사용할 확장자를 콤마로 구분하여 out에 입력하기만 하면 됩니다.

<input type="file" accept=".any, .ext, .you, .want">

다음의 조작만으로, 파일의 올바른 컨텐츠 타입을 알 수 있습니다.

1) 대상 파일을 선택합니다.

2) 콘솔에서 다음을 실행합니다.

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

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

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

Attribute Accept에 여러 Atribute에 문제가 있어 이 경우 올바르게 동작하지 않습니다.

테스트 결과, 「macOS 10.15.7 Catalina」에서는, 「Dom / Rikin Patel」의 회답이, [.xlsx]파일을 정상적으로 인식할 수 없습니다.

저는 개인적으로 대부분의 기존 답안을 정리하고 개인 시험을 통과했습니다.다음 답변을 요약합니다.

accept=".csv, .xls, .xlsx, text/csv, application/csv,
text/comma-separated-values, application/csv, application/excel,
application/vnd.msexcel, text/anytext, application/vnd. ms-excel,
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"

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

검증할 수 입니다.파일 창이 열려 있으면 사용자가 옵션을 선택할 수 있기 때문입니다."All files ('*')"를 input elementaccept Atribute로

다음과 같은 수락 유형을 사용할 수 있습니다.

<input id="upload_file" accept="image/png,image/jpg,image/jpeg,.doc, .docx,.xls,.xlsx,.pdf,.csv," name="upload_file" type="file"/>

어트리뷰트 를 할 수 있게 되었습니다.pattern=".+\.(xlsx|xls|csv)".

언급URL : https://stackoverflow.com/questions/11832930/html-input-file-accept-attribute-file-type-csv