Dosyayı yüklemeden önce dosya uzantısının doğrulanması

Görüntüleri bir sunucu uygulamasına yüklüyorum. Yüklenen dosyanın bir resim olup olmadığının doğrulanması, yalnızca sunucu tarafında, dosya başlığındaki sihirli sayılar kontrol edilerek yapılır. Formu sunucu uygulamasına göndermeden önce istemci tarafındaki uzantıları doğrulamanın bir yolu var mı? Enter tuşuna basar basmaz yüklemeye başlar.

İstemci tarafında Javascript ve jQuery kullanıyorum.

Güncelleme: Sonunda, bayt okuyan ve bir resim değilse yüklemeyi reddeden sunucu tarafı doğrulamasına sahip oldum.

Yalnızca dosya uzantısını kontrol etmek mümkündür, ancak kullanıcı kolayca virus.exe'yi virus.jpg olarak yeniden adlandırabilir ve doğrulamayı "geçirebilir".

Değeri ne olursa olsun, dosya uzantısını kontrol etmek ve geçerli uzantılardan birini karşılamıyorsa iptal etmek için kod: (geçersiz dosyayı seçin ve uyarıyı çalışırken görmek için göndermeyi deneyin)

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>

Kodun, kullanıcının dosya seçmeden göndermesine izin vereceğini unutmayın ... Gerekirse, satırı kaldırın if (sFileName.length > 0) {ve bununla ilişkili kapatma ayracı. Kod, adından bağımsız olarak formdaki herhangi bir dosya girişini doğrular.

Bu, jQuery ile daha az satırda yapılabilir, ancak "ham" JavaScript konusunda yeterince rahatım ve nihai sonuç aynı.

Daha fazla dosyanız varsa veya yalnızca form gönderirken değil, dosyayı değiştirdikten sonra denetimi tetiklemek istiyorsanız, bunun yerine şu kodu kullanın:

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

Bu, geçersiz dosya uzantısı durumunda uyarı gösterecek ve girişi sıfırlayacaktır.

Mevcut yanıtların hiçbiri, talebin basitliği için yeterince kompakt görünmüyordu. Belirli bir dosya giriş alanının bir kümeden bir uzantıya sahip olup olmadığını kontrol etmek şu şekilde gerçekleştirilebilir:

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

Dolayısıyla örnek kullanım şöyle olabilir ( bir dosya girdisinin nerede uploadolduğu id):

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

Veya bir jQuery eklentisi olarak:

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

Örnek kullanım:

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

.replace(/\./g, '\\.')Bu temel uzantıları herhangi bir karakter eşleşen noktalar olmadan geçirilebilir böylece regexp için nokta var kaçmak.

Bunları kısa tutmak için kontrol etmekte bir hata yoktur, muhtemelen bunları kullanırsanız, girişin önce var olduğundan ve uzantı dizisinin geçerli olduğundan emin olursunuz!

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

Buraya geldim çünkü buradaki cevapların hiçbirinin şiirsel olmadığından emindim:

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

dosyanın seçilip seçilmediğini kontrol edin

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

dosya uzantısını kontrol edin

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

Bu örneği beğendim:

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

Yükleme dosyalarını seçmek için input type = "file" kullanıyor musunuz? öyleyse, neden kabul özelliğini kullanmıyorsunuz?

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

Bir giriş alanında uzak url'leri test etmeniz gerekiyorsa, ilgilendiğiniz türlerle basit bir normal ifadeyi test etmeyi deneyebilirsiniz.

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

Bu, .gif, .jpg, .jpeg, .tiff veya .png ile biten her şeyi yakalayacaktır.

Twitter gibi bazı popüler sitelerin resimlerinin sonuna bir boyut özelliği eklediğini unutmamalıyım. Örneğin, aşağıdaki geçerli bir görüntü türü olmasına rağmen bu testte başarısız olabilir:

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

Bu nedenle bu mükemmel bir çözüm değil. Ama sizi yolun yaklaşık% 90'ına götürecektir.

bunu dene (benim için çalışıyor)

  
  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>

     

Array.prototype.some () aracılığıyla günümüzde başka bir örnek .

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

JQuery kullandığınızı varsayarsak, işte daha yeniden kullanılabilir bir yol

Kitaplık işlevi (jQuery gerektirmez):

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

Sayfa işlevi (jQuery gerektirir (zar zor)):

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

acceptGirdi dosyası türleri için mevcut olan niteliği kullanabilirsiniz. MDN belgelerine göz atın

JQuery'de böyle yapılır

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

Göz at düğmesini ve dosya uzantısını doğrulamak istediğinizde şu kodu kullanın:

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

Uzantıyı kontrol etmektense mimetype ile denemenin daha iyi olduğunu düşünüyorum. Çünkü bazen dosyalar onsuz da olabilir ve linux ve unix sistemlerinde çok iyi çalışıyorlar.

Yani, bunun gibi bir şey deneyebilirsiniz:

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

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

Gereken dosya türünü içeren bir dizi oluşturabilir ve dizide dosya türünün var olup olmadığını kontrol etmek için jQuery'de $ .inArray () öğesini kullanabilirsiniz.

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

gönderirken kontrol edebiliriz veya bu kontrolün olayını değiştirebiliriz

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

Bence bu, diğerlerinden çok daha kısa olan en iyi çözüm:

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

Bu durumda işlev, bu ayarla Kendo Yükleme kontrolünden çağrılır:

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