HTML: จะ จำกัด การอัปโหลดไฟล์ให้เป็นภาพได้อย่างไร?

ด้วย HTML ฉันจะ จำกัด ประเภทไฟล์ที่สามารถอัปโหลดได้อย่างไร

เพื่อให้ประสบการณ์ผู้ใช้ง่ายขึ้นฉันต้องการ จำกัด การอัปโหลดไฟล์ให้เป็นรูปภาพเท่านั้น (jpeg, gif, png)

<form method="post" action="..." enctype="multipart/form-data">
<label for="image">Photo</label>
<input name="image" type="file" />
</form>

HTML5 <input type="file" accept="image/*">กล่าวว่า แน่นอนอย่าไว้วางใจการตรวจสอบความถูกต้องฝั่งไคลเอ็นต์: โปรดตรวจสอบอีกครั้งในฝั่งเซิร์ฟเวอร์ ...

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

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

คุณยังสามารถ จำกัด ประเภทละครใบ้ได้หลายประเภท

<input type="file" multiple accept='image/*|audio/*|video/*' >

และอีกวิธีหนึ่งในการตรวจสอบประเภท mime โดยใช้ file object

ไฟล์ออบเจ็กต์ให้ชื่อขนาดและประเภท

var files=e.target.files;

var mimeType=files[0].type; // You can get the mime type

คุณยังสามารถ จำกัด ผู้ใช้สำหรับไฟล์บางประเภทในการอัปโหลดโดยใช้รหัสด้านบน

แก้ไข

หากสิ่งต่างๆเป็นไปตามที่ควรจะเป็นคุณสามารถทำได้โดยใช้แอตทริบิวต์ "ยอมรับ"

http://www.webmasterworld.com/forum21/6310.htm

อย่างไรก็ตามเบราว์เซอร์แทบจะไม่สนใจสิ่งนี้ดังนั้นจึงไม่เกี่ยวข้องกัน คำตอบสั้น ๆ คือฉันไม่คิดว่าจะมีวิธีทำใน HTML คุณต้องตรวจสอบฝั่งเซิร์ฟเวอร์แทน

โพสต์เก่าต่อไปนี้มีข้อมูลบางอย่างที่สามารถช่วยคุณได้

ใส่ไฟล์แอตทริบิวต์ "ยอมรับ" - มีประโยชน์หรือไม่?

นี่คือ HTML สำหรับการอัปโหลดรูปภาพ accept="image/*"โดยค่าเริ่มต้นก็จะแสดงไฟล์ภาพเฉพาะในหน้าต่างการเรียกดูเพราะเราได้ใส่ แต่เรายังสามารถเปลี่ยนได้จากดรอปดาวน์และมันจะแสดงไฟล์ทั้งหมด ดังนั้นส่วน Javascript จะตรวจสอบว่าไฟล์ที่เลือกเป็นภาพจริงหรือไม่

 <div class="col-sm-8 img-upload-section">
     <input name="image3" type="file" accept="image/*" id="menu_images"/>
     <img id="menu_image" class="preview_img" />
     <input type="submit" value="Submit" />
 </div> 

ในเหตุการณ์การเปลี่ยนแปลงเราจะตรวจสอบขนาดของรูปภาพก่อน และในifเงื่อนไขที่สองเราตรวจสอบว่าเป็นไฟล์ภาพหรือไม่

this.files[0].type.indexOf("image")จะเป็น-1ถ้าไม่ใช่ไฟล์รูปภาพ

document.getElementById("menu_images").onchange = function () {
    var reader = new FileReader();
    if(this.files[0].size>528385){
        alert("Image Size should not be greater than 500Kb");
        $("#menu_image").attr("src","blank");
        $("#menu_image").hide();  
        $('#menu_images').wrap('<form>').closest('form').get(0).reset();
        $('#menu_images').unwrap();     
        return false;
    }
    if(this.files[0].type.indexOf("image")==-1){
        alert("Invalid Type");
        $("#menu_image").attr("src","blank");
        $("#menu_image").hide();  
        $('#menu_images').wrap('<form>').closest('form').get(0).reset();
        $('#menu_images').unwrap();         
        return false;
    }   
    reader.onload = function (e) {
        // get loaded data and render thumbnail.
        document.getElementById("menu_image").src = e.target.result;
        $("#menu_image").show(); 
    };

    // read the image file as a data URL.
    reader.readAsDataURL(this.files[0]);
};

<script>

    function chng()
    {
        var typ=document.getElementById("fiile").value;
        var res = typ.match(".jp");

        if(res)
        {
            alert("sucess");
        }
        else
        {
            alert("Sorry only jpeg images are accepted");
            document.getElementById("fiile").value="; //clear the uploaded file
        }
    }

</script>

ตอนนี้อยู่ในส่วน html

<input type="file" onchange="chng()">

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

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

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

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

ทางออกที่ดีที่สุดของคุณคือทำการกรองบางอย่างที่แบ็คเอนด์บนเซิร์ฟเวอร์

ชำระเงินโครงการที่ชื่อว่า Uploadify http://www.uploadify.com/

เป็นโปรแกรมอัปโหลดไฟล์ที่ใช้ Flash + jQuery สิ่งนี้ใช้กล่องโต้ตอบการเลือกไฟล์ของ Flash ซึ่งช่วยให้คุณสามารถกรองประเภทไฟล์เลือกไฟล์หลายไฟล์ในเวลาเดียวกัน ฯลฯ