Nhập liệu HTML = Tập tin khác chấp nhận Loại tệp thuộc tính (CSV)

Tôi có một đối tượng tải lên tập tin trên trang của mình:

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

với các tệp excel sau trên máy tính để bàn của tôi:

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

Tôi muốn tải lên tập tin để chỉ hiển thị .xlsx, .xls, & .csvfile.

Sử dụng acceptthuộc tính, tôi thấy các loại nội dung này đã chăm sóc .xlsx& .xlstiện ích mở rộng ...

accept= application / vnd.openxmlformats-offratedocument.s Lansheetml.sheet (.XLSX)

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

Tuy nhiên, tôi không thể tìm thấy loại nội dung chính xác cho tệp CSV Excel! Bất kỳ đề xuất?

VÍ DỤ: http://jsfiddle.net/LzLcZ/

Chà, điều này thật đáng xấu hổ ... Tôi đã tìm ra giải pháp mà tôi đang tìm kiếm và nó không thể đơn giản hơn. Tôi đã sử dụng mã sau đây để có được kết quả mong muốn. Mong rằng điều này sẽ giúp ai đó trong tương lai. Cảm ơn mọi người đã giúp đỡ.

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

Các loại chấp nhận hợp lệ:

Đối với tệp CSV (.csv), hãy sử dụng:

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

Đối với Tệp Excel 97-2003 (.xls), hãy sử dụng:

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

Đối với Tệp Excel 2007+ (.xlsx), hãy sử dụng:

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

Đối với tệp văn bản (.txt) sử dụng:

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

Đối với Tệp hình ảnh (.png / .jpg / etc), hãy sử dụng:

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

Đối với Tệp HTML (.htm, .html), hãy sử dụng:

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

Đối với Tệp video (.avi, .mpg, .mpeg, .mp4), hãy sử dụng:

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

Đối với Tệp âm thanh (.mp3, .wav, v.v.), hãy sử dụng:

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

Đối với tệp PDF , sử dụng:

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

DEMO:
http://jsfiddle.net/dundredd77/LzLcZ/144/

GHI CHÚ:

Nếu bạn đang cố hiển thị các tệp CSV Excel ( .csv), KHÔNG sử dụng:

• text/csv
• application/csv
• text/comma-separated-values(chỉ hoạt động trong Opera ).

Nếu bạn đang cố gắng hiển thị một loại tệp cụ thể (ví dụ: a WAVhoặc PDF), thì điều này hầu như sẽ luôn hoạt động ...

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

Ngày nay, bạn chỉ có thể sử dụng phần mở rộng tập tin

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

Theo tôi biết, thuộc tính này rất cũ và không được chấp nhận trong các trình duyệt hiện đại theo như tôi biết, nhưng đây là một thay thế cho nó, Hãy thử điều này

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

Tôi đoán nó sẽ giúp bạn tất nhiên bạn có thể thay đổi tập lệnh này theo nhu cầu của bạn.

Tôi đã sử dụng text/comma-separated-valuescho loại mime CSV trong thuộc tính accept và nó hoạt động tốt trong Opera. Đã thử text/csvmà không gặp may.

Một số loại MIME khác cho CSV nếu đề xuất không hoạt động:

• văn bản / dấu phẩy được phân tách-giá trị
• văn bản / csv
• ứng dụng / csv
• ứng dụng / excel
• ứng dụng / vnd.ms-excel
• ứng dụng / vnd.msexcel
• văn bản / anytext

Nguồn: http://filext.com/file-extension/CSV

Điều này không làm việc cho tôi trong Safari 10:

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

Tôi đã phải viết điều này thay vào đó:

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

Bạn có thể biết loại nội dung chính xác cho bất kỳ tệp nào bằng cách thực hiện như sau:

1) Chọn tập tin quan tâm,

2) Và chạy trong giao diện điều khiển này:

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

Bạn cũng có thể đặt thuộc tính "nhiều" cho đầu vào của mình để kiểm tra loại nội dung cho một số tệp cùng một lúc và thực hiện tiếp theo:

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

Chấp nhận thuộc tính có một số vấn đề với nhiều thuộc tính và không hoạt động chính xác trong trường hợp này.

Tôi đã sửa đổi giải pháp của @yogi. Ngoài ra, khi tệp có định dạng không chính xác, tôi đặt lại giá trị phần tử đầu vào.

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

Tôi có bản dựng xác minh tùy chỉnh, vì trong cửa sổ tệp mở, người dùng vẫn có thể chọn các tùy chọn "Tất cả tệp ('*')", bất kể tôi có đặt rõ ràng thuộc tính chấp nhận trong phần tử đầu vào hay không.

Bây giờ bạn có thể sử dụng thuộc tính xác thực đầu vào html5 mới pattern=".+\.(xlsx|xls|csv)".