Überprüfung der Dateierweiterung vor dem Hochladen der Datei

Ich lade Bilder in ein Servlet hoch. Die Überprüfung, ob es sich bei der hochgeladenen Datei um ein Bild handelt, erfolgt nur auf der Serverseite, indem die magischen Zahlen im Dateikopf überprüft werden. Gibt es eine Möglichkeit, die Erweiterungen auf der Clientseite zu überprüfen, bevor das Formular an das Servlet gesendet wird? Sobald ich die Eingabetaste drücke, wird der Upload gestartet.

Ich verwende Javascript und jQuery auf der Clientseite.

Update: Ich hatte schließlich eine serverseitige Validierung, die Bytes liest und den Upload ablehnt, wenn es sich nicht um ein Bild handelt.

Es ist möglich, nur die Dateierweiterung zu überprüfen, aber der Benutzer kann virus.exe einfach in virus.jpg umbenennen und die Validierung "bestehen".

Hier ist der Code zum Überprüfen der Dateierweiterung und zum Abbrechen, wenn eine der gültigen Erweiterungen nicht erfüllt ist: (Wählen Sie eine ungültige Datei aus und versuchen Sie zu senden, um die Warnung in Aktion zu sehen.)

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>

Beachten Sie, dass der Code es dem Benutzer ermöglicht, ohne Auswahl der Datei zu senden. Wenn dies erforderlich ist, entfernen Sie die Zeile if (sFileName.length > 0) {und die zugehörige schließende Klammer. Der Code überprüft alle in das Formular eingegebenen Dateien, unabhängig von ihrem Namen.

Dies kann mit jQuery in weniger Zeilen durchgeführt werden, aber ich bin mit "rohem" JavaScript vertraut und das Endergebnis ist das gleiche.

Wenn Sie mehr Dateien haben oder die Prüfung beim Ändern der Datei und nicht nur beim Senden von Formularen auslösen möchten, verwenden Sie stattdessen diesen Code:

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

Dies zeigt eine Warnung an und setzt die Eingabe zurück, falls die Dateierweiterung ungültig ist.

Keine der vorhandenen Antworten schien für die Einfachheit der Anfrage recht kompakt genug zu sein. Die Überprüfung, ob ein bestimmtes Dateieingabefeld eine Erweiterung aus einem Satz hat, kann wie folgt durchgeführt werden:

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

Die Beispielverwendung könnte also sein (wo uploadist die ideiner Dateieingabe):

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

Oder als jQuery-Plugin:

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

Anwendungsbeispiel:

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

Das .replace(/\./g, '\\.')dient dazu, dem Punkt für den regulären Ausdruck zu entkommen, sodass grundlegende Erweiterungen übergeben werden können, ohne dass die Punkte mit einem Zeichen übereinstimmen.

Es gibt keine Fehlerprüfung bei diesen, um sie kurz zu halten. Wenn Sie sie verwenden, stellen Sie vermutlich sicher, dass die Eingabe zuerst vorhanden ist und das Erweiterungsarray gültig ist!

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

Ich bin hierher gekommen, weil ich sicher war, dass keine der Antworten hier ziemlich ... poetisch war:

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

Überprüfen Sie, ob die Datei ausgewählt ist oder nicht

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

Überprüfen Sie die Dateierweiterung

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

Ich mag dieses Beispiel:

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

Wenn Sie Remote-URLs in einem Eingabefeld testen müssen, können Sie versuchen, einen einfachen regulären Ausdruck mit den Typen zu testen, an denen Sie interessiert sind.

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

Dadurch wird alles erfasst, was mit .gif, .jpg, .jpeg, .tiff oder .png endet

Ich sollte beachten, dass einige beliebte Websites wie Twitter ein Größenattribut an das Ende ihrer Bilder anhängen. Zum Beispiel würde Folgendes diesen Test nicht bestehen, obwohl es sich um einen gültigen Bildtyp handelt:

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

Aus diesem Grund ist dies keine perfekte Lösung. Aber es wird Sie zu ungefähr 90% des Weges bringen.

Verwenden Sie den Eingabetyp = "Datei", um die Upload-Dateien auszuwählen? Wenn ja, warum nicht das Attribut accept verwenden?

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

versuchen Sie dies (funktioniert für mich)

  
  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>

     

Dies ist eine wiederverwendbarere Methode, vorausgesetzt, Sie verwenden jQuery

Bibliotheksfunktion (erfordert keine 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) }

Seitenfunktion (erfordert jQuery (kaum)):

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

[Typoskript]

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

Sie können das acceptfür Eingabedateitypen verfügbare Attribut verwenden. MDN-Dokumentation zur Kasse

So wird es in jquery gemacht

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

Ein weiteres heutiges Beispiel über 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'));

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

Sie können ein Array erstellen, das den erforderlichen Dateityp enthält, und mit $ .inArray () in jQuery prüfen, ob der Dateityp im Array vorhanden ist.

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

Verwenden Sie diesen Code, wenn Sie die Schaltfläche zum Durchsuchen und die Dateierweiterung überprüfen möchten:

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

Wir können es beim Senden überprüfen oder ein Änderungsereignis für dieses Steuerelement vornehmen

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

Dies ist meiner Meinung nach die beste Lösung, die bei weitem viel kürzer ist als die anderen:

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

In diesem Fall wird die Funktion von einem Kendo Upload-Steuerelement mit folgender Einstellung aufgerufen:

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