จะอนุญาตให้ <input type =“ file”> ยอมรับเฉพาะไฟล์ภาพได้อย่างไร

375

ฉันต้องอัปโหลดเฉพาะไฟล์ภาพผ่าน<input type="file">แท็ก

ตอนนี้ยอมรับไฟล์ทุกประเภท แต่ผมต้องการที่จะ จำกัด ไว้เฉพาะนามสกุลไฟล์รูปภาพเท่านั้นที่เฉพาะเจาะจงซึ่งรวมถึง.jpg, .gifฯลฯ

ฉันจะใช้ฟังก์ชันนี้ได้อย่างไร

html

— kbvishnu
แหล่งที่มา

เทคโนโลยีใช้ฝั่งเซิร์ฟเวอร์คืออะไร

— Erdal G.

1

kbvishnu, บางทีคุณอาจจะทบทวนคำตอบที่คุณยอมรับมานานแล้ว. คุณไม่ต้องยอมรับคำตอบอื่น ฉันแค่แนะนำตามจำนวนธงที่เราได้รับในคำตอบและระดับคะแนนเมื่อเทียบกับคำตอบอื่น ๆ อย่างน้อยที่สุดคุณอาจพิจารณาไม่ยอมรับมัน

— Aaron Hall

942

ใช้แอตทริบิวต์acceptของแท็กอินพุต ดังนั้นในการยอมรับเฉพาะ PNGs, JPEGs และ GIF คุณสามารถใช้รหัสต่อไปนี้:

<input type="file" name="myImage" accept="image/x-png,image/gif,image/jpeg" />

ขยายตัวอย่างข้อมูล

หรือเพียงแค่:

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

ขยายตัวอย่างข้อมูล

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

มันควรจะทำงานใน IE 10+, Chrome, Firefox, Safari 6+, Opera 15+ แต่การสนับสนุนนั้นคร่าวๆในโทรศัพท์มือถือ (จนถึงปี 2015) และจากรายงานบางอย่างนี้อาจป้องกันไม่ให้เบราว์เซอร์มือถือบางตัวอัปโหลดอะไรเลย อย่าลืมทดสอบแพลตฟอร์มเป้าหมายของคุณด้วย

สำหรับการสนับสนุนเบราว์เซอร์โดยละเอียดโปรดดูที่http://caniuse.com/#feat=input-file-accept

— บ้าระห่ำหัวเราะ
แหล่งที่มา

@madcap accept="file/csv, file/xls"ใช้ได้หรือไม่?

— KNU

19

คุณแน่ใจimage/x-pngเหรอ image/pngตามรายการนี้ก็เป็นเพียง iana.org/assignments/media-types/media-types.xhtml

— Micros

6

นั่นควรเป็นคำตอบที่เลือก! มันก็ขาดโน้ตบอกว่าคุณยังคงต้องตรวจสอบฝั่งเซิร์ฟเวอร์ (เพราะเบราว์เซอร์ที่ไม่สนับสนุน แต่ยังสำหรับการรักษาความปลอดภัย)

— Erdal กรัม

1

อาจใช้งานได้เมื่อคำตอบคือคำตอบ แต่ลองและไม่ทำงานกับ FF ฉันต้องการเพิ่ม accept = ". png, .jpg, .jpeg" เช่น: jsfiddle.net/DiegoTc/qjsv8ay9/4

— Diego

1

อย่าพึ่งพามันอย่างสมบูรณ์ สามารถรับไฟล์อื่น ๆ ได้อย่างง่ายดายเช่นกัน คุณเพียงแค่เปลี่ยนประเภทไฟล์ที่อนุญาตในหน้าต่างเปิดไฟล์

163

ใช้สิ่งนี้:

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

ใช้ได้ทั้ง FF และ Chrome

— Tyilo
แหล่งที่มา

14

แอตทริบิวต์ accept ไม่ใช่เครื่องมือตรวจสอบความถูกต้องการอัปโหลดทั้งหมดควรได้รับการตรวจสอบความถูกต้องบนเซิร์ฟเวอร์เสมอ ...

— TlonXP

1

ยังไม่ได้รับการสนับสนุนในเบราว์เซอร์ Android ดั้งเดิม แต่ทำงานได้ดีกับผู้อื่นฉันเดาcaniuse.com/#feat=input-file-accept

— mcy

ฉันชอบวิธีนี้เพราะในไฟล์แจ้งให้เลื่อนลงประเภทแสดง "ไฟล์ภาพ"

— hardsetting

ระวังสิ่งนี้เพราะมันช่วยให้ SVG ซึ่งคุณอาจไม่ต้องการ

— stephenmurdoch

สิ่งนี้จะอนุญาตไฟล์รูปภาพสูงสุด. png, .jpg, .jpeg, .gif, .bmp, .ico, .tiff, .svg, .ai, .psp, .pcd, .pct, .raw ดังนั้นจะเป็นการดีกว่าถ้าพูดถึงประเภทเฉพาะ

— Thamarai T

76

ใช้มันแบบนี้

<input type="file" accept=".png, .jpg, .jpeg" />

มันใช้งานได้สำหรับฉัน

https://jsfiddle.net/ermagrawal/5u4ftp3k/

— เอ้อ Mohit Agrawal
แหล่งที่มา

สิ่งนี้ไม่ทำงานสำหรับ iOS 12 ผู้ใช้ยังคงสามารถเลือกวิดีโอในอุปกรณ์

— user3160227

28

ขั้นตอน:
1. เพิ่มคุณสมบัติการยอมรับให้กับแท็กอินพุต
2. ตรวจสอบกับ javascript
3. เพิ่มการตรวจสอบความถูกต้องฝั่งเซิร์ฟเวอร์เพื่อตรวจสอบว่าเนื้อหาเป็นไฟล์ประเภทที่คาดหวังจริงๆ

สำหรับ HTML และ javascript:

<html>
<body>
<input name="image" type="file" id="fileName" accept=".jpg,.jpeg,.png" onchange="validateFileType()"/>
<script type="text/javascript">
    function validateFileType(){
        var fileName = document.getElementById("fileName").value;
        var idxDot = fileName.lastIndexOf(".") + 1;
        var extFile = fileName.substr(idxDot, fileName.length).toLowerCase();
        if (extFile=="jpg" || extFile=="jpeg" || extFile=="png"){
            //TO DO
        }else{
            alert("Only jpg/jpeg and png files are allowed!");
        }   
    }
</script>
</body>
</html>

คำอธิบาย:

แอ็ตทริบิวต์ accept จะกรองไฟล์ที่จะแสดงในป๊อปอัพตัวเลือกไฟล์ อย่างไรก็ตามมันไม่ใช่การตรวจสอบ มันเป็นเพียงคำใบ้ของเบราว์เซอร์ ผู้ใช้ยังคงสามารถเปลี่ยนตัวเลือกในป๊อปอัพได้
จาวาสคริปต์จะตรวจสอบความถูกต้องของนามสกุลไฟล์ แต่ไม่สามารถตรวจสอบได้จริง ๆ ว่าไฟล์ที่เลือกเป็น jpg หรือ png จริง
ดังนั้นคุณต้องเขียนเพื่อตรวจสอบความถูกต้องของเนื้อหาไฟล์ทางฝั่งเซิร์ฟเวอร์

— Surya Kameswara Rao Ravi
แหล่งที่มา

1

คำตอบที่สมบูรณ์ที่สุด

— paranoidhominid

27

สามารถทำได้โดย

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

แต่นี่ไม่ใช่วิธีที่ดี คุณต้องโค้ดที่ฝั่งเซิร์ฟเวอร์เพื่อตรวจสอบไฟล์รูปภาพหรือไม่

ตรวจสอบว่าไฟล์ภาพเป็นภาพจริงหรือภาพปลอม

if(isset($_POST["submit"])) {
    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
    if($check !== false) {
        echo "File is an image - " . $check["mime"] . ".";
        $uploadOk = 1;
    }
    else {
        echo "File is not an image.";
        $uploadOk = 0;
    }
}

สำหรับการอ้างอิงเพิ่มเติมดูที่นี่

http://www.w3schools.com/tags/att_input_accept.asp
http://www.w3schools.com/php/php_file_upload.asp

— Ashok Devatwal
แหล่งที่มา

5

คุณสามารถใช้acceptแอตทริบิวต์สำหรับ<input type="file">อ่านเอกสารนี้ได้ที่http://www.w3schools.com/tags/att_input_accept.asp

— yussan
แหล่งที่มา

3

การใช้ type = "file" และ accept = "image / *" (หรือรูปแบบที่คุณต้องการ) อนุญาตให้ผู้ใช้เลือกไฟล์ที่มีรูปแบบเฉพาะ แต่คุณต้องตรวจสอบอีกครั้งในฝั่งไคลเอ็นต์เนื่องจากผู้ใช้สามารถเลือกไฟล์ประเภทอื่นได้ มันใช้งานได้สำหรับฉัน

<input #imageInput accept="image/*" (change)="processFile(imageInput)" name="upload-photo" type="file" id="upload-photo" />

จากนั้นในสคริปต์จาวาสคริปต์ของคุณ

processFile(imageInput) {
    if (imageInput.files[0]) {
      const file: File = imageInput.files[0];
      var pattern = /image-*/;

      if (!file.type.match(pattern)) {
        alert('Invalid format');
        return;
      }

      // here you can do whatever you want with your image. Now you are sure that it is an image
    }
  }

— Mati Cassanelli
แหล่งที่มา

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

— Adam Marshall

ฉันได้รับความคิดของคุณ นี่เป็นไวยากรณ์ JS ที่ถูกต้องconst file: File = imageInput.files[0];หรือไม่: นอกจากนี้การกำหนด id ให้กับอินพุตไม่ได้กระทำในลักษณะปกติ

— อีวานพี

ที่จริงแล้วไม่ใช่ JS แต่เป็น typescript รหัสบล็อกถูกคัดลอกจากโครงการเชิงมุม หากคุณต้องการใช้ในไฟล์ javascript คุณจะต้องละเว้นการกำหนดประเภท (: ไฟล์)

— Mati Cassanelli

0

หากคุณต้องการอัปโหลดหลายภาพพร้อมกันคุณสามารถเพิ่มแอmultipleททริบิวให้ป้อนได้

upload multiple files: <input type="file" multiple accept='image/*'>

ขยายตัวอย่างข้อมูล

— JerryGoyal
แหล่งที่มา