Wie kann jQuery Dateitypen beim Hochladen einschränken?

Ich möchte, dass jQuery ein Feld zum Hochladen von Dateien auf jpg / jpeg, png und gif beschränkt. Ich überprüfe PHPbereits das Backend . Ich führe meine Senden-Schaltfläche bereits über eine JavaScriptFunktion aus, sodass ich wirklich nur wissen muss, wie ich vor dem Senden oder Benachrichtigen nach den Dateitypen suchen kann.

Sie können den Wert eines Dateifelds genauso wie jedes andere Feld abrufen. Sie können es jedoch nicht ändern.

Um oberflächlich zu überprüfen, ob eine Datei die richtige Erweiterung hat, können Sie Folgendes tun:

var ext = $('#my_file_field').val().split('.').pop().toLowerCase();
if($.inArray(ext, ['gif','png','jpg','jpeg']) == -1) {
    alert('invalid extension!');
}

Für diese Aufgabe ist kein Plugin erforderlich. Hat dies aus ein paar anderen Skripten zusammengeschustert:

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

Der Trick dabei ist, die Upload-Schaltfläche auf deaktiviert zu setzen, bis ein gültiger Dateityp ausgewählt ist.

Sie können das Validierungs-Plugin für jQuery verwenden: http://docs.jquery.com/Plugins/Validation

Es gibt eine accept () -Regel, die genau das tut, was Sie brauchen: http://docs.jquery.com/Plugins/Validation/Methods/accept#extension

Beachten Sie, dass die Steuerung der Dateierweiterung nicht kugelsicher ist, da sie in keiner Weise mit dem Mimetyp der Datei zusammenhängt. Sie könnten also eine PNG-Datei haben, die ein Word-Dokument ist, und eine DOC-Datei, die ein perfekt gültiges PNG-Bild ist. Also vergiss nicht, mehr Steuerelemente serverseitig zu machen;)

Für das Front-End ist es ziemlich praktisch, das Attribut ' accept ' zu setzen, wenn Sie ein Dateifeld verwenden.

Beispiel:

<input id="file" type="file" name="file" size="30" 
       accept="image/jpg,image/png,image/jpeg,image/gif" 
/>

Ein paar wichtige Hinweise:

• Das Attribut accept wird in Internet Explorer 10, Firefox, Opera, Chrome und Safari 6 unterstützt.
• Der Text für die Dateierweiterung wird im Dateibrowser-Dialogfeld von verschiedenen Browsern unterschiedlich angezeigt.

Sie möchten nicht lieber nach MIME suchen als nach der Ausdehnung, die der Benutzer lügt? Wenn ja, dann ist es weniger als eine Zeile:

<input type="file" id="userfile" accept="image/*|video/*" required />

Für meinen Fall habe ich folgende Codes verwendet:

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

Ich versuche ein funktionierendes Codebeispiel zu schreiben, ich teste es und alles funktioniert.

Hase ist Code:

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

Dieser Code funktioniert einwandfrei. Das einzige Problem besteht jedoch darin, dass das Dateiformat nicht den angegebenen Optionen entspricht. Es wird eine Warnmeldung angezeigt, aber der Dateiname wird angezeigt, während er vernachlässigt werden sollte.

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

In diesem Beispiel können nur PNG-Bilder hochgeladen werden.

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

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

Wenn Sie mit mehreren (HTML 5) Datei-Uploads zu tun haben, habe ich den oben vorgeschlagenen Kommentar genommen und ein wenig geändert:

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

        }
    }

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

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

Hier ist ein einfacher Code für die Javascript-Validierung. Nach der Validierung wird die Eingabedatei bereinigt.

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