Validasi ekstensi file sebelum mengupload file

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.

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.

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!

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

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()"/>

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

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>

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

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.

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>

     

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

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

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

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

Beginilah cara melakukannya di jquery

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

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

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

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

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

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

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")).