Validasi ekstensi file sebelum mengupload file


90

Saya mengunggah gambar ke servlet. Validasi apakah file yang diunggah adalah gambar dilakukan di sisi server saja, dengan memeriksa angka ajaib di header file. Apakah ada cara untuk memvalidasi ekstensi di sisi klien sebelum mengirimkan formulir ke servlet? Segera setelah saya menekan enter, itu mulai mengunggah.

Saya menggunakan Javascript dan jQuery di sisi klien.

Pembaruan: Saya akhirnya berakhir dengan validasi sisi server yang membaca byte & menolak unggahan jika itu bukan gambar.


2
Anda menggunakan Uploadify seperti yang disarankan di salah satu pertanyaan Anda sebelumnya, bukan?
BalusC

Tidak, itu berhenti di antara 50-96. Mencoba berkali-kali dengan berbagai masukan. Dan, saya juga sedang terburu-buru mencari solusi pada saat itu. Jadi, saya mencoba yang sederhana jquery.ProgressBar.js. Berhasil, baik. ### Jadi, dapatkah saya memvalidasi dengan uploadify !!!


Tidak bisakah kita hanya menggunakan atribut accept di tag input untuk memastikan bahwa pengguna memilih file dengan format yang ditentukan?
AnonSar

Jawaban:


117

Anda hanya dapat memeriksa ekstensi file, tetapi pengguna dapat dengan mudah mengganti nama virus.exe menjadi virus.jpg dan "meneruskan" validasi.

Untuk mengetahui manfaatnya, berikut ini kode untuk memeriksa ekstensi file dan membatalkan jika tidak memenuhi salah satu ekstensi yang valid: (pilih file yang tidak valid dan coba kirim untuk melihat peringatan beraksi)

var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];    
function Validate(oForm) {
    var arrInputs = oForm.getElementsByTagName("input");
    for (var i = 0; i < arrInputs.length; i++) {
        var oInput = arrInputs[i];
        if (oInput.type == "file") {
            var sFileName = oInput.value;
            if (sFileName.length > 0) {
                var blnValid = false;
                for (var j = 0; j < _validFileExtensions.length; j++) {
                    var sCurExtension = _validFileExtensions[j];
                    if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
                        blnValid = true;
                        break;
                    }
                }
                
                if (!blnValid) {
                    alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
                    return false;
                }
            }
        }
    }
  
    return true;
}
<form onsubmit="return Validate(this);">
  File: <input type="file" name="my file" /><br />
  <input type="submit" value="Submit" />
</form>

Catatan, kode tersebut akan memungkinkan pengguna untuk mengirim tanpa memilih file ... jika diperlukan, hapus baris if (sFileName.length > 0) {dan tanda kurung tutupnya. Kode akan memvalidasi masukan file apa pun dalam formulir, apa pun namanya.

Ini bisa dilakukan dengan jQuery dalam beberapa baris, tapi saya cukup nyaman dengan JavaScript "mentah" dan hasil akhirnya sama.

Jika Anda memiliki lebih banyak file, atau ingin memicu pemeriksaan saat mengubah file dan tidak hanya dalam pengiriman formulir, gunakan kode tersebut sebagai gantinya:

var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];    
function ValidateSingleInput(oInput) {
    if (oInput.type == "file") {
        var sFileName = oInput.value;
         if (sFileName.length > 0) {
            var blnValid = false;
            for (var j = 0; j < _validFileExtensions.length; j++) {
                var sCurExtension = _validFileExtensions[j];
                if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
                    blnValid = true;
                    break;
                }
            }
             
            if (!blnValid) {
                alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
                oInput.value = "";
                return false;
            }
        }
    }
    return true;
}
File 1: <input type="file" name="file1" onchange="ValidateSingleInput(this);" /><br />
File 2: <input type="file" name="file2" onchange="ValidateSingleInput(this);" /><br />
File 3: <input type="file" name="file3" onchange="ValidateSingleInput(this);" /><br />

Ini akan menunjukkan peringatan dan mengatur ulang input jika ekstensi file tidak valid.


Saya hanya ingin menambahkan bahwa menggunakan "onSubmit" daripada "onChange" akan merepotkan - terutama jika opsi "beberapa" digunakan. Setiap file harus dicentang saat dipilih, bukan saat seluruh formulir diposting.
DevlshOne

@DevlshOne ide menarik, akan menyebutkan ini juga di pos. Terima kasih!
Shadow Wizard adalah Ear For You

Terima kasih banyak untuk kode ini @Shadow Wizard. Ini sangat membantu saya!
Anahit Ghazaryan

1
@ Garryman gagal bagaimana? Pertanyaannya di sini tidak menyebutkan file itu diperlukan. Jika dalam kasus Anda file tersebut adalah bidang yang diperlukan, Anda dapat memindahkan baris var blnValid = false;ke atas loop di atas arrInputs, kemudian setelah loop periksa variabel blnValid: jika benar, biarkan formulir terkirim, jika tidak, tunjukkan peringatan bahwa file itu diperlukan.
Shadow Wizard adalah Ear For You

periksa jawaban saya di bawah ini
Divyesh Jani

73

Tak satu pun dari jawaban yang ada tampaknya cukup kompak untuk kesederhanaan permintaan. Memeriksa apakah bidang masukan file yang diberikan memiliki ekstensi dari satu set dapat dilakukan sebagai berikut:

function hasExtension(inputID, exts) {
    var fileName = document.getElementById(inputID).value;
    return (new RegExp('(' + exts.join('|').replace(/\./g, '\\.') + ')$')).test(fileName);
}

Jadi penggunaan contoh mungkin (di mana uploadadalah idsebuah masukan file):

if (!hasExtension('upload', ['.jpg', '.gif', '.png'])) {
    // ... block upload
}

Atau sebagai plugin jQuery:

$.fn.hasExtension = function(exts) {
    return (new RegExp('(' + exts.join('|').replace(/\./g, '\\.') + ')$')).test($(this).val());
}

Contoh penggunaan:

if (!$('#upload').hasExtension(['.jpg', '.png', '.gif'])) {
    // ... block upload
}

The .replace(/\./g, '\\.')ada untuk melarikan diri dot untuk regexp sehingga ekstensi dasar dapat berlalu tanpa titik-titik yang cocok karakter apapun.

Tidak ada kesalahan memeriksa ini untuk membuatnya tetap pendek, mungkin jika Anda menggunakannya, Anda akan memastikan input ada terlebih dahulu dan array ekstensi valid!


10
Bagus. Perhatikan bahwa skrip ini peka huruf besar / kecil. Untuk mengatasi ini, Anda perlu memberiRexExp the "i" modifier, for example: return (new RegExp('(' + exts.join('|').replace(/\./g, '\\.') + ')$', "i")).test(fileName);
Tedd Hansen

2
Agak sulit untuk dibaca, tetapi itu berarti menambahkan , "i"setelah akhir string regex ( )$'). Ini akan menambah dukungan untuk casing apa pun dalam ekstensi nama file (.jpg, .JPG, .Jpg, dll ...)
Tedd Hansen

Terima kasih, Tedd, akan lebih baik jika pencocokan tidak peka huruf besar / kecil.
Orbling

39
$(function () {
    $('input[type=file]').change(function () {
        var val = $(this).val().toLowerCase(),
            regex = new RegExp("(.*?)\.(docx|doc|pdf|xml|bmp|ppt|xls)$");

        if (!(regex.test(val))) {
            $(this).val('');
            alert('Please select correct file format');
        }
    });
});

1
Terima kasih, sangat sederhana dan bersih.
Th3_hide

jika Anda menekan batal, itu akan memicu peringatan.
PinoyStackOverflower

18

Saya datang ke sini karena saya yakin tidak ada jawaban di sini yang cukup ... puitis:

function checkextension() {
  var file = document.querySelector("#fUpload");
  if ( /\.(jpe?g|png|gif)$/i.test(file.files[0].name) === false ) { alert("not an image!"); }
}
<input type="file" id="fUpload" onchange="checkextension()"/>


Terima kasih ini berfungsi di Angular dengan sedikit modifikasi, terima kasih
skydev

bekerja dengan baik untuk saya, meskipun seseorang harus memangkas spasi tambahan dari nama sebelum pengujian. +1
Roberto

9

periksa apakah file dipilih atau tidak

       if (document.myform.elements["filefield"].value == "")
          {
             alert("You forgot to attach file!");
             document.myform.elements["filefield"].focus();
             return false;  
         }

periksa ekstensi file

  var res_field = document.myform.elements["filefield"].value;   
  var extension = res_field.substr(res_field.lastIndexOf('.') + 1).toLowerCase();
  var allowedExtensions = ['doc', 'docx', 'txt', 'pdf', 'rtf'];
  if (res_field.length > 0)
     {
          if (allowedExtensions.indexOf(extension) === -1) 
             {
               alert('Invalid file Format. Only ' + allowedExtensions.join(', ') + ' are allowed.');
               return false;
             }
    }

8

Saya suka contoh ini:

<asp:FileUpload ID="fpImages" runat="server" title="maximum file size 1 MB or less" onChange="return validateFileExtension(this)" />

<script language="javascript" type="text/javascript">
    function ValidateFileUpload(Source, args) {
        var fuData = document.getElementById('<%= fpImages.ClientID %>');
        var FileUploadPath = fuData.value;

        if (FileUploadPath == '') {
            // There is no file selected 
            args.IsValid = false;
        }
        else {
            var Extension = FileUploadPath.substring(FileUploadPath.lastIndexOf('.') + 1).toLowerCase();
            if (Extension == "gif" || Extension == "png" || Extension == "bmp" || Extension == "jpeg") {
                args.IsValid = true; // Valid file type
                FileUploadPath == '';
            }
            else {
                args.IsValid = false; // Not valid file type
            }
        }
    }
</script>

7

Apakah Anda menggunakan input type = "file" untuk memilih file unggahan? jika ya, mengapa tidak menggunakan atribut accept?

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

Ini! accept="image/*"itu pasti pilihan paling cerdas dalam banyak kasus.
Alberto T.

6

Jika Anda perlu menguji url jarak jauh di bidang masukan, Anda dapat mencoba menguji regex sederhana dengan jenis yang Anda minati.

$input_field = $('.js-input-field-class');

if ( !(/\.(gif|jpg|jpeg|tiff|png)$/i).test( $input_field.val() )) {
  $('.error-message').text('This URL is not a valid image type. Please use a url with the known image types gif, jpg, jpeg, tiff or png.');
  return false;
}

Ini akan menangkap apa pun yang diakhiri dengan .gif, .jpg, .jpeg, .tiff atau .png

Saya harus mencatat bahwa beberapa situs populer seperti Twitter menambahkan atribut ukuran di akhir gambar mereka. Misalnya, berikut ini akan gagal dalam pengujian ini meskipun itu adalah jenis gambar yang valid:

https://pbs.twimg.com/media/BrTuXT5CUAAtkZM.jpg:large

Karena itu, ini bukanlah solusi yang tepat. Tapi itu akan membawa Anda ke sekitar 90% jalan.


4

coba ini (Bekerja untuk saya)

  
  function validate(){
  var file= form.file.value;
       var reg = /(.*?)\.(jpg|bmp|jpeg|png)$/;
       if(!file.match(reg))
       {
    	   alert("Invalid File");
    	   return false;
       }
       }
<form name="form">
<input type="file" name="file"/>
<input type="submit" onClick="return validate();"/>
</form>

     


2

Contoh lain saat ini melalui Array.prototype.some () .

function isImage(icon) {
  const ext = ['.jpg', '.jpeg', '.bmp', '.gif', '.png', '.svg'];
  return ext.some(el => icon.endsWith(el));
}

console.log(isImage('questions_4234589.png'));
console.log(isImage('questions_4234589.doc'));


1

Berikut adalah cara yang lebih dapat digunakan kembali, dengan asumsi Anda menggunakan jQuery

Fungsi perpustakaan (tidak membutuhkan jQuery):

function stringEndsWithValidExtension(stringToCheck, acceptableExtensionsArray, required) {
    if (required == false && stringToCheck.length == 0) { return true; }
    for (var i = 0; i < acceptableExtensionsArray.length; i++) {
        if (stringToCheck.toLowerCase().endsWith(acceptableExtensionsArray[i].toLowerCase())) { return true; }
    }
    return false;
}


String.prototype.startsWith = function (str) { return (this.match("^" + str) == str) }

String.prototype.endsWith = function (str) { return (this.match(str + "$") == str) }

Fungsi halaman (membutuhkan jQuery (hampir tidak)):

$("[id*='btnSaveForm']").click(function () {
    if (!stringEndsWithValidExtension($("[id*='fileUploader']").val(), [".png", ".jpeg", ".jpg", ".bmp"], false)) {
        alert("Photo only allows file types of PNG, JPG and BMP.");
        return false;
    }
    return true;
});

1

[TypeScript]

uploadFileAcceptFormats: string[] = ['image/jpeg', 'image/gif', 'image/png', 'image/svg+xml'];

// if you find the element type in the allowed types array, then read the file
isAccepted = this.uploadFileAcceptFormats.find(val => {
    return val === uploadedFileType;
});

1

Anda dapat menggunakan acceptatribut yang tersedia untuk jenis file masukan. Lihat dokumentasi MDN


2
Dengan ini, Anda masih dapat memilih jenis file lain
César León

@ Célén Ya. Pengguna memiliki opsi untuk memilih semua file. Jika Anda ingin membatasinya juga, Anda perlu melakukan validasi manual. Periksa jawaban lain.
Madura Pradeep

1

Beginilah cara melakukannya di jquery

$("#artifact_form").submit(function(){
    return ["jpg", "jpeg", "bmp", "gif", "png"].includes(/[^.]+$/.exec($("#artifact_file_name").val())[0])
  });

1

Saat Anda ingin memvalidasi tombol jelajah dan ekstensi file, gunakan kode ini:

function fileValidate(){ 
var docVal=document.forms[0].fileUploaded.value;
var extension = docVal.substring(docVal.lastIndexOf(".")+1,docVal.length);
if(extension.toLowerCase() != 'pdf')
alert("Please enter file  in .pdf extension ");

return false;
}

1
ketika Anda ingin memvalidasi tombol jelajah dan ekstensi file, gunakan kode ini.
Ajay Kumar Gupta

0
<script type="text/javascript">

        function file_upload() {
            var imgpath = document.getElementById("<%=FileUpload1.ClientID %>").value;
            if (imgpath == "") {
                alert("Upload your Photo...");
                document.file.word.focus();
                return false;
            }
            else {
                // code to get File Extension..

                var arr1 = new Array;
                arr1 = imgpath.split("\\");
                var len = arr1.length;
                var img1 = arr1[len - 1];
                var filext = img1.substring(img1.lastIndexOf(".") + 1);
                // Checking Extension
                if (filext == "bmp" || filext == "gif" || filext == "png" || filext == "jpg" || filext == "jpeg" ) {
                    alert("Successfully Uploaded...")
                    return false;
                }
                else {
                    alert("Upload Photo with Extension ' bmp , gif, png , jpg , jpeg '");
                    document.form.word.focus();
                    return false;
                }
            }
        }

        function Doc_upload() {
            var imgpath = document.getElementById("<%=FileUpload2.ClientID %>").value;
            if (imgpath == "") {
                alert("Upload Agreement...");
                document.file.word.focus();
                return false;
            }
            else {
                // code to get File Extension..

                var arr1 = new Array;
                arr1 = imgpath.split("\\");
                var len = arr1.length;
                var img1 = arr1[len - 1];
                var filext = img1.substring(img1.lastIndexOf(".") + 1);
                // Checking Extension
                if (filext == "txt" || filext == "pdf" || filext == "doc") {
                    alert("Successfully Uploaded...")
                    return false;
                }
                else {
                    alert("Upload File with Extension ' txt , pdf , doc '");
                    document.form.word.focus();
                    return false;
                }
            }
        }
</script>

3
Akan lebih baik jika Anda menuliskan deskripsi singkat dari jawaban Anda.
Roopendra

0

var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];    
function ValidateSingleInput(oInput) {
    if (oInput.type == "file") {
        var sFileName = oInput.value;
         if (sFileName.length > 0) {
            var blnValid = false;
            for (var j = 0; j < _validFileExtensions.length; j++) {
                var sCurExtension = _validFileExtensions[j];
                if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
                    blnValid = true;
                    break;
                }
            }
             
            if (!blnValid) {
                alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
                oInput.value = "";
                return false;
            }
        }
    }
    return true;
}
File 1: <input type="file" name="file1" onchange="ValidateSingleInput(this);" /><br />
File 2: <input type="file" name="file2" onchange="ValidateSingleInput(this);" /><br />
File 3: <input type="file" name="file3" onchange="ValidateSingleInput(this);" /><br />


0

Anda dapat membuat sebuah array yang menyertakan tipe file yang dibutuhkan dan menggunakan $ .inArray () di jQuery untuk memeriksa apakah tipe file ada dalam array.

var imageType = ['jpeg', 'jpg', 'png', 'gif', 'bmp'];  

// Given that file is a file object and file.type is string 
// like "image/jpeg", "image/png", or "image/gif" and so on...

if (-1 == $.inArray(file.type.split('/')[1], imageType)) {
  console.log('Not an image type');
}

0

kita bisa memeriksanya saat mengirimkan atau kita bisa membuat perubahan acara kontrol itu

var fileInput = document.getElementById('file');
    var filePath = fileInput.value;
    var allowedExtensions = /(\.jpeg|\.JPEG|\.gif|\.GIF|\.png|\.PNG)$/;
    if (filePath != "" && !allowedExtensions.exec(filePath)) {
    alert('Invalid file extention pleasse select another file');
    fileInput.value = '';
    return false;
    }

0

Saya pikir lebih baik untuk mencoba dengan mimetype daripada memeriksa ekstensi. Karena, terkadang file bisa ada tanpa itu dan itu bekerja dengan sangat baik di sistem linux dan unix.

Jadi, Anda bisa mencoba sesuatu seperti ini:

["image/jpeg", "image/png", "image/gif"].indexOf(file.type) > -1

-1

Ini adalah solusi terbaik menurut saya, yang jauh lebih pendek daripada yang lain:

function OnSelect(e) {
    var acceptedFiles = [".jpg", ".jpeg", ".png", ".gif"];
    var isAcceptedImageFormat = ($.inArray(e.files[0].extension, acceptedFiles)) != -1;

    if (!isAcceptedImageFormat) {
        $('#warningMessage').show();
    }
    else {
        $('#warningMessage').hide();
    }
}

Dalam kasus ini, fungsi dipanggil dari kontrol Upload Kendo dengan pengaturan ini:

.Events(e => e.Select("OnSelect")).

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.