จะมี jQuery จำกัด ประเภทไฟล์ในการอัพโหลดได้อย่างไร?

ฉันต้องการให้ jQuery จำกัด ช่องอัพโหลดไฟล์ไว้ที่ jpg / jpeg, png และ gif เท่านั้น ฉันกำลังตรวจสอบแบ็กเอนด์ด้วยPHPอยู่แล้ว ฉันใช้ปุ่มส่งผ่านJavaScriptฟังก์ชั่นอยู่แล้วดังนั้นฉันเพียงแค่ต้องรู้วิธีตรวจสอบประเภทไฟล์ก่อนส่งหรือแจ้งเตือน

คุณจะได้รับค่าของฟิลด์ไฟล์เหมือนกับฟิลด์อื่น ๆ อย่างไรก็ตามคุณไม่สามารถแก้ไขได้

ดังนั้นหากต้องการตรวจสอบอย่างผิวเผินว่าไฟล์มีนามสกุลที่ถูกต้องหรือไม่คุณสามารถทำสิ่งนี้ได้:

var ext = $('#my_file_field').val().split('.').pop().toLowerCase();
if($.inArray(ext, ['gif','png','jpg','jpeg']) == -1) {
    alert('invalid extension!');
}

ไม่จำเป็นต้องใช้ปลั๊กอินสำหรับงานนี้ ผสมผสานสิ่งนี้เข้าด้วยกันจากสคริปต์อื่น ๆ :

$('INPUT[type="file"]').change(function () {
    var ext = this.value.match(/\.(.+)$/)[1];
    switch (ext) {
        case 'jpg':
        case 'jpeg':
        case 'png':
        case 'gif':
            $('#uploadButton').attr('disabled', false);
            break;
        default:
            alert('This is not an allowed file type.');
            this.value = '';
    }
});

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

คุณสามารถใช้ปลั๊กอินตรวจสอบความถูกต้องสำหรับ jQuery: http://docs.jquery.com/Plugins/Validation

มีกฎยอมรับ () ที่ทำสิ่งที่คุณต้องการ: http://docs.jquery.com/Plugins/Validation/Methods/accept#extension

โปรดทราบว่าการควบคุมนามสกุลไฟล์ไม่ใช่การพิสูจน์สัญลักษณ์แสดงหัวข้อย่อยเนื่องจากไม่เกี่ยวข้องกับ mimetype ของไฟล์ ดังนั้นคุณสามารถมี. png ที่เป็นเอกสารคำและ. doc ซึ่งเป็นภาพ png ที่ใช้ได้อย่างสมบูรณ์แบบ ดังนั้นอย่าลืมทำการควบคุมฝั่งเซิร์ฟเวอร์ให้มากขึ้น;)

สำหรับส่วนหน้าจะค่อนข้างสะดวกในการใส่แอตทริบิวต์ " ยอมรับ " หากคุณใช้ฟิลด์ไฟล์

ตัวอย่าง:

<input id="file" type="file" name="file" size="30" 
       accept="image/jpg,image/png,image/jpeg,image/gif" 
/>

หมายเหตุสำคัญสองประการ:

• ยอมรับแอตทริบิวต์ได้รับการสนับสนุนใน Internet Explorer 10, Firefox, Opera, Chrome และ Safari 6
• มันจะแสดงข้อความสำหรับนามสกุลไฟล์ที่แตกต่างกันในกล่องโต้ตอบไฟล์เบราว์เซอร์จากเบราว์เซอร์ต่างๆ

ไม่ต้องการตรวจสอบมากกว่า MIME มากกว่าส่วนขยายใด ๆ ที่ผู้ใช้โกหก? ถ้าเป็นเช่นนั้นจะน้อยกว่าหนึ่งบรรทัด:

<input type="file" id="userfile" accept="image/*|video/*" required />

สำหรับกรณีของฉันฉันใช้รหัสต่อไปนี้:

    if (!(/\.(gif|jpg|jpeg|tiff|png)$/i).test(fileName)) {              
    alert('You must select an image file only');               
    }

ฉันพยายามเขียนตัวอย่างโค้ดที่ใช้งานได้ฉันทดสอบและทุกอย่างใช้งานได้

กระต่ายคือรหัส:

HTML:

<input type="file" class="attachment_input" name="file" onchange="checkFileSize(this, @Model.MaxSize.ToString(),@Html.Raw(Json.Encode(Model.FileExtensionsList)))" />

Javascript:

 //function for check attachment size and extention match
function checkFileSize(element, maxSize, extentionsArray) {
    var val = $(element).val(); //get file value

    var ext = val.substring(val.lastIndexOf('.') + 1).toLowerCase(); // get file extention 
    if ($.inArray(ext, extentionsArray) == -1) {
        alert('false extension!');
    }

    var fileSize = ($(element)[0].files[0].size / 1024 / 1024); //size in MB
    if (fileSize > maxSize) {
        alert("Large file");// if Maxsize from Model > real file size alert this
    }
}

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

$('#ff2').change(
                function () {
                    var fileExtension = ['jpeg', 'jpg', 'pdf'];
                    if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
                        alert("Only '.jpeg','.jpg','.pdf' formats are allowed.");
                        return false; }
});

ตัวอย่างนี้อนุญาตให้อัปโหลดภาพ PNG เท่านั้น

HTML

<input type="file" class="form-control" id="FileUpload1" accept="image/png" />

JS

$('#FileUpload1').change(
                function () {
                    var fileExtension = ['png'];
                    if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
                        alert("Only '.png' format is allowed.");
                        this.value = ''; // Clean field
                        return false;
                    }
                });

<form enctype="multipart/form-data">
   <input name="file" type="file" />
   <input type="submit" value="Upload" />
</form>
<script>
$('input[type=file]').change(function(){
    var file = this.files[0];
    name = file.name;
    size = file.size;
    type = file.type;
    //your validation
});
</script>

หากคุณกำลังจัดการกับการอัปโหลดไฟล์ (html 5) หลายไฟล์ฉันได้รับคำแนะนำยอดนิยมและแก้ไขเล็กน้อย:

    var files = $('#file1')[0].files;
    var len = $('#file1').get(0).files.length;

    for (var i = 0; i < len; i++) {

        f = files[i];

        var ext = f.name.split('.').pop().toLowerCase();
        if ($.inArray(ext, ['gif', 'png', 'jpg', 'jpeg']) == -1) {
            alert('invalid extension!');

        }
    }

    $("input[name='btnsubmit']").attr('disabled', true);
    $('input[name="filphoto"]').change(function () {
    var ext = this.value.match(/\.(.+)$/)[1];
    switch (ext) 
    {
    case 'jpg':
    case 'jpeg':
    case 'png':
    case 'bmp':
        $("input[name='btnsubmit']").attr('disabled', false);
    break;
    default:
        alert('This is not an allowed file type.');
        $("input[name='btnsubmit']").attr('disabled', true);
        this.value = '';

function validateFileExtensions(){
        var validFileExtensions = ["jpg", "jpeg", "gif", "png"];
        var fileErrors = new Array();

        $( "input:file").each(function(){
            var file = $(this).value;
            var ext = file.split('.').pop();
            if( $.inArray( ext, validFileExtensions ) == -1) {
                fileErrors.push(file);
            }
        });

        if( fileErrors.length > 0 ){
            var errorContainer = $("#validation-errors");
            for(var i=0; i < fileErrors.length; i++){
                errorContainer.append('<label for="title" class="error">* File:'+ file +' do not have a valid format!</label>');
            }
            return false;
        }
        return true;
    }

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

<input type="file" id="image" accept="image/*" onChange="validate(this.value)"/>

function validate(file) {
    var ext = file.split(".");
    ext = ext[ext.length-1].toLowerCase();      
    var arrayExtensions = ["jpg" , "jpeg", "png", "bmp", "gif"];

    if (arrayExtensions.lastIndexOf(ext) == -1) {
        alert("Wrong extension type.");
        $("#image").val("");
    }
}