HTML Input =“ file” ยอมรับประเภทไฟล์คุณสมบัติ (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" />

สำหรับไฟล์ Excel 97-2003 (.xls) ให้ใช้:

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

สำหรับExcel Files 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" /> 

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

บันทึก:

ถ้าคุณกำลังพยายามที่จะแสดงไฟล์ Excel CSV ( .csv) จะไม่ได้ใช้:

• text/csv
• application/csv
• text/comma-separated-values( ใช้ได้กับ Opera เท่านั้น )

หากคุณพยายามที่จะแสดงไฟล์บางประเภท (เช่น 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-valuesสำหรับประเภท mime แบบ CSV ในการยอมรับคุณสมบัติและทำงานได้ดีใน Opera พยายามอย่างtext/csvไร้โชค

ประเภท MIME อื่น ๆ สำหรับ CSV หากคำแนะนำไม่ทำงาน:

• ข้อความ / คั่นด้วยเครื่องหมายจุลภาคค่า
• ข้อความ / CSV
• แอพลิเคชัน / CSV
• แอพลิเคชัน / Excel
• application / vnd.ms-Excel
• แอพลิเคชัน / vnd.msexcel
• ข้อความ / anytext

ที่มา: 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);

นอกจากนี้คุณยังสามารถตั้งค่าแอตทริบิวต์ "หลาย" สำหรับอินพุตของคุณเพื่อตรวจสอบประเภทเนื้อหาสำหรับไฟล์หลายไฟล์ในเวลาเดียวกันและทำต่อไป:

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

ฉันมี buildin การตรวจสอบที่กำหนดเองเพราะในหน้าต่างเปิดไฟล์ผู้ใช้ยังคงสามารถเลือกตัวเลือก "ไฟล์ทั้งหมด ('*')" ไม่ว่าฉันจะตั้งค่าคุณสมบัติการยอมรับในองค์ประกอบอินพุตอย่างชัดเจน

ตอนนี้คุณสามารถใช้แอตทริบิวต์การตรวจสอบอินพุต html5 ใหม่pattern=".+\.(xlsx|xls|csv)"ได้แล้ว