Bagaimana agar jQuery membatasi jenis file saat diunggah?


133

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.

Jawaban:


280

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!');
}

18
Dan ikat ke formulir Anda: $("#my_upload_form").bind("submit", function() { // above check });
321X

7
Anda bisa menggunakan$('#file_field').change(function(){// above check});
makki

3
$("#my_upload_form").bind("submit", function() { // above check });sekarang harus diikat menggunakan $("#my_upload_form").submit(function() { // above check }); api.jquery.com/submit . Anda juga dapat mencegah pengiriman formulir menggunakan$("#my_upload_form").submit(function(e) { // above check e.preventDefault(); });
Liam

1
Dalam hal ini, jika pengguna akan menambahkan ".jpg" misalnya ke file MS Word, FileUpload akan menerima file ini sebagai gambar. Saya pikir itu tidak benar.
Jeyhun

3
Nilainya menyatakan bahwa ini bukan metode bukti bodoh .. Pada akhir hari pastikan backend Anda memeriksa beberapa byte pertama file untuk memastikan itu benar-benar tipe file yang Anda inginkan. Hal lain untuk dipikirkan adalah, di linux dan osx Anda dapat memiliki file tanpa ekstensi yang sebenarnya dari tipe yang Anda inginkan .. jadi ini akan gagal juga
chris

39

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.


6
maaf bro, tapi itu regex yang buruk. file diizinkan memiliki titik-titik pada namanya. "giel.asd.aaaaa.jpg.png" .match (/\.(.+)$/)
Tim Kretschmer

27

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


dapatkah Anda memberikan contoh cara menggunakannya dengan plugins.krajee.com/file-input#option-allowedfileextensions on
IE11

25

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:


1
Jauh lebih baik daripada menggunakan JQuery
Christopher Grigg

19

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

tidak mendapatkan apa yang dia butuhkan. itu hanya untuk penanganan yang lebih mudah untuk memilih gambar dari folder dengan ekstensi berbeda. seperti yang Anda lihat di sini -> imageshack.us/a/img20/8451/switchzz.jpg
bernte

Karena tidak melukai IE <10, dan tidak melukai kode lain, ini merupakan batasan efektif pada apa yang Anda coba batasi.
Leo

4

untuk kasus saya, saya menggunakan kode berikut:

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

3

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

1

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

1

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

Bisakah Anda menyarankan cara membatasi ukuran gambar. Misalnya, gambar berukuran 10mb tidak boleh diterima
PDSSandeep

@PDSSandeep Periksa tautan ini, pls stackoverflow.com/questions/6575159/…
Pengembang

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

Ini tidak dapat memeriksa jenis dan ukuran file, diuji dalam FF.
Qammar Feroz

0

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!');

        }
    }

0
    $("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 = '';

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

-1

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("");
    }
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.