จำกัด รูปแบบไฟล์เมื่อใช้ <input type =“ file”> หรือไม่

ฉันต้องการ จำกัด ประเภทของไฟล์ที่สามารถเลือกได้จากตัวเลือกไฟล์ดั้งเดิมของระบบปฏิบัติการเมื่อผู้ใช้คลิกปุ่มเรียกดูใน<input type="file">องค์ประกอบใน HTML ผมมีความรู้สึกว่ามันเป็นไปไม่ได้ แต่ผมอยากจะทราบว่ามีเป็นวิธีการแก้ปัญหา ฉันต้องการเก็บเฉพาะ HTML และ JavaScript กรุณาอย่าแฟลช

พูดอย่างเคร่งครัดคำตอบคือไม่มี นักพัฒนาไม่สามารถป้องกันผู้ใช้จากการอัปโหลดไฟล์ประเภทหรือส่วนขยายใด ๆ

แต่ถึงกระนั้นคุณสมบัติการยอมรับของ<input type = "file">สามารถช่วยให้ตัวกรองในกล่องโต้ตอบเลือกไฟล์ของระบบปฏิบัติการ ตัวอย่างเช่น,

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

ควรมีวิธีในการกรองไฟล์อื่นที่ไม่ใช่. xls หรือ. xlsx ถึงแม้ว่าหน้าMDNสำหรับinputองค์ประกอบจะกล่าวว่ามันสนับสนุนสิ่งนี้ แต่ก็ไม่ได้ผลสำหรับฉันใน Firefox จนถึงรุ่น 42 ซึ่งสามารถใช้งานได้ใน IE 10+, Edge และ Chrome

ดังนั้นสำหรับการสนับสนุน Firefox ที่มีอายุมากกว่า 42 พร้อมกับ IE 10+, Edge, Chrome และ Opera ฉันคิดว่าเป็นการดีกว่าที่จะใช้รายการ MIME-types ที่คั่นด้วยเครื่องหมายจุลภาค:

<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox) -->
<input type="file"
 accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" /> 

[ ลักษณะการทำงานEdge (EdgeHTML): ดรอปดาวน์ตัวกรองประเภทไฟล์จะแสดงประเภทไฟล์ที่กล่าวถึงที่นี่ แต่ไม่ใช่ค่าเริ่มต้นในดรอปดาวน์ ตัวกรองเริ่มต้นคือ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 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

สำคัญ:การใช้แอacceptททริบิวให้วิธีการกรองในไฟล์ประเภทที่น่าสนใจเท่านั้น เบราว์เซอร์ยังอนุญาตให้ผู้ใช้เลือกไฟล์ประเภทใดก็ได้ ควรทำการตรวจสอบเพิ่มเติม (ฝั่งไคลเอ็นต์) (โดยใช้ JavaScript วิธีนี้จะเป็นอย่างนั้น ) และประเภทไฟล์ที่แน่นอนต้องตรวจสอบบนเซิร์ฟเวอร์โดยใช้การรวมกันของประเภท MIME โดยใช้ทั้งนามสกุลไฟล์และลายเซ็นไบนารี ( ASP) .NET , PHP , Ruby , Java ) คุณอาจต้องการอ้างถึงตารางเหล่านี้ สำหรับประเภทไฟล์และหมายเลขเวทย์มนตร์เพื่อทำการตรวจสอบฝั่งเซิร์ฟเวอร์ที่มีประสิทธิภาพยิ่งขึ้น

ต่อไปนี้เป็นสามการ อ่านที่ดี สำหรับการอัปโหลดไฟล์และความปลอดภัย

แก้ไข: บางทีการตรวจสอบประเภทไฟล์โดยใช้ลายเซ็นไบนารีของมันยังสามารถทำได้ในฝั่งไคลเอ็นต์โดยใช้ JavaScript (แทนที่จะเพียงแค่ดูที่ส่วนขยาย) โดยใช้ HTML5 File API แต่ยังคงต้องตรวจสอบไฟล์บนเซิร์ฟเวอร์เนื่องจากผู้ใช้ที่ประสงค์ร้าย จะยังคงสามารถอัปโหลดไฟล์ได้โดยทำคำขอ HTTP ที่กำหนดเอง

มีแอตทริบิวต์ accept สำหรับแท็กอินพุต อย่างไรก็ตามมันไม่น่าเชื่อถือ แต่อย่างใด เบราว์เซอร์ส่วนใหญ่ถือว่าเป็น "คำแนะนำ" ซึ่งหมายความว่าผู้ใช้จะขึ้นอยู่กับตัวจัดการไฟล์ด้วยมีตัวเลือกล่วงหน้าที่แสดงประเภทที่ต้องการเท่านั้น พวกเขายังคงสามารถเลือก "ไฟล์ทั้งหมด" และอัปโหลดไฟล์ใดก็ได้ที่พวกเขาต้องการ

ตัวอย่างเช่น:

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

อ่านเพิ่มเติมในสเป็ค HTML5

โปรดทราบว่ามันจะใช้เป็น "ช่วย" สำหรับผู้ใช้ในการค้นหาไฟล์ที่ถูกต้องเท่านั้น ผู้ใช้ทุกคนสามารถส่งคำขอใด ๆ ที่เขา / เธอต้องการไปยังเซิร์ฟเวอร์ของคุณ คุณต้องตรวจสอบทุกอย่างที่ฝั่งเซิร์ฟเวอร์เสมอ

ดังนั้นคำตอบคือไม่มีคุณไม่สามารถ จำกัดแต่คุณสามารถตั้งค่าการเลือกก่อน แต่คุณไม่สามารถพึ่งพาได้

หรือนอกจากนี้คุณสามารถทำสิ่งที่คล้ายกันได้โดยตรวจสอบชื่อไฟล์ (ค่าของฟิลด์อินพุต) ด้วย JavaScript แต่สิ่งนี้ไร้สาระเพราะไม่มีการป้องกันและไม่ทำให้การเลือกของผู้ใช้ง่ายขึ้น มันอาจหลอกให้เว็บมาสเตอร์คิดว่าเขา / เธอได้รับการคุ้มครองและเปิดช่องโหว่ความปลอดภัย มันอาจเป็นความเจ็บปวดใน ass สำหรับผู้ใช้ที่มีนามสกุลไฟล์สำรอง (เช่น jpeg แทน 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>

ในทางเทคนิคคุณสามารถระบุacceptคุณสมบัติ (ทางเลือกในhtml5 ) ในinputองค์ประกอบ แต่ไม่รองรับอย่างถูกต้อง

ใช้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;
}

คุณสามารถทำได้จริงด้วย javascript แต่จำไว้ว่า js คือฝั่งไคลเอ็นต์ดังนั้นคุณจะต้อง "เตือนผู้ใช้" ว่าไฟล์ประเภทใดที่พวกเขาสามารถอัปโหลดได้ถ้าคุณต้องการหลีกเลี่ยงข้อ จำกัด หรือ จำกัด ตามที่คุณกล่าวไว้ ทำฝั่งเซิร์ฟเวอร์

ดูTut พื้นฐานนี้ถ้าคุณต้องการเริ่มต้นกับการตรวจสอบฝั่งเซิร์ฟเวอร์ สำหรับบทช่วยสอนทั้งหมดโปรดไปที่หน้านี้

โชคดี!

ดังที่กล่าวไว้ในคำตอบก่อนหน้านี้เราไม่สามารถ จำกัด ให้ผู้ใช้เลือกไฟล์สำหรับรูปแบบไฟล์ที่กำหนดเท่านั้น แต่มันมีประโยชน์มากที่จะใช้แท็ก accept บนไฟล์ใน html

สำหรับการตรวจสอบเราต้องทำที่ฝั่งเซิร์ฟเวอร์ เราสามารถทำได้ที่ด้านลูกค้าใน js แต่ไม่ใช่วิธีแก้ปัญหาที่เข้าใจไม่ได้ เราต้องตรวจสอบที่ฝั่งเซิร์ฟเวอร์

สำหรับความต้องการเหล่านี้ฉันชอบเฟรมเวิร์กการพัฒนาเว็บแอ็พพลิเคชัน Java ของ struts2 จริง ๆ ด้วยคุณสมบัติการอัปโหลดไฟล์ในตัวการอัปโหลดไฟล์ไปยังแอปพลิเคชั่นบนเว็บ struts2 จึงเป็นเรื่องง่าย เพียงแค่พูดถึงรูปแบบไฟล์ที่เราต้องการยอมรับในแอปพลิเคชันของเราและส่วนที่เหลือทั้งหมดจะได้รับการดูแลโดยแกนหลักของเฟรมเวิร์กนั้นเอง คุณสามารถตรวจสอบได้ที่เว็บไซต์อย่างเป็นทางการของเสา

ฉันอาจแนะนำต่อไปนี้:

• หากคุณต้องให้ผู้ใช้เลือกไฟล์ภาพใด ๆ โดยค่าเริ่มต้นการใช้ accept = "image / *"

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

• หากคุณต้องการ จำกัด ประเภทภาพบางประเภทให้ใช้ accept = "image / bmp, image / jpeg, image / png"

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

• ถ้าคุณต้องการ จำกัด เฉพาะบางประเภทให้ใช้ accept = ". bmp, .doc, .pdf"

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

• คุณไม่สามารถ จำกัด ผู้ใช้ให้เปลี่ยนไฟล์ตัวกรองเป็นไฟล์ทั้งหมดได้ดังนั้นควรตรวจสอบประเภทไฟล์ในสคริปต์และเซิร์ฟเวอร์เสมอ