Bagaimana agar jQuery membatasi jenis file saat diunggah?

Saya ingin agar jQuery membatasi bidang unggahan file hanya ke jpg / jpeg, png, dan gif. Saya sudah melakukan pemeriksaan backend dengan PHPsudah. Saya menjalankan tombol kirim saya melalui JavaScriptfungsi jadi saya benar-benar hanya perlu tahu cara memeriksa jenis file sebelum mengirim atau mengingatkan.

Anda bisa mendapatkan nilai bidang file sama seperti bidang lainnya. Namun, Anda tidak dapat mengubahnya.

Jadi untuk dangkal memeriksa apakah file memiliki ekstensi yang tepat, Anda bisa melakukan sesuatu seperti ini:

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

Tidak diperlukan plugin untuk tugas ini. Memperbaiki ini bersama-sama dari beberapa skrip lain:

$('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 = '';
    }
});

Kuncinya di sini adalah untuk mengatur tombol unggah ke dinonaktifkan kecuali dan sampai jenis file yang valid dipilih.

Anda dapat menggunakan plugin validasi untuk jQuery: http://docs.jquery.com/Plugins/Validation

Kebetulan memiliki aturan accept () yang melakukan persis apa yang Anda butuhkan: http://docs.jquery.com/Plugins/Validation/Methods/accept#extension

Perhatikan bahwa mengendalikan ekstensi file bukanlah bukti peluru karena sama sekali tidak terkait dengan mimetype file. Jadi, Anda dapat memiliki .png yang merupakan dokumen kata dan .doc yang merupakan gambar png yang benar-benar valid. Jadi jangan lupa untuk membuat lebih banyak kontrol di sisi server;)

Untuk front-end, cukup mudah untuk menempatkan atribut ' accept ' jika Anda menggunakan bidang file.

Contoh:

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

Beberapa catatan penting:

• Atribut accept didukung di Internet Explorer 10, Firefox, Opera, Chrome, dan Safari 6.
• Ini akan menampilkan teks untuk ekstensi file secara berbeda dalam dialog browser file dari browser yang berbeda.

Tidak ingin memeriksa pada MIME daripada pada ekstensi apa pun yang berbohong pengguna? Jika demikian maka kurang dari satu baris:

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

untuk kasus saya, saya menggunakan kode berikut:

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

Saya mencoba menulis contoh kode kerja, saya mengujinya dan semuanya berfungsi.

Kelinci adalah kode:

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

Kode ini berfungsi dengan baik, tetapi satu-satunya masalah adalah jika format file selain dari opsi yang ditentukan, ini menunjukkan pesan peringatan tetapi menampilkan nama file sementara itu harus mengabaikannya.

$('#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; }
});

Contoh ini memungkinkan untuk hanya mengunggah gambar 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>

Jika Anda berurusan dengan beberapa unggahan file (html 5), saya mengambil komentar yang disarankan paling atas dan memodifikasinya sedikit:

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

Berikut ini adalah kode sederhana untuk validasi javascript, dan setelah memvalidasi itu akan membersihkan file input.

<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("");
    }
}