Wie kann jQuery Dateitypen beim Hochladen einschränken?

133

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.

Anthony
quelle

Antworten:

280

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!');
}
Paolo Bergantino
quelle
18
Und binden Sie es an Ihr Formular: $("#my_upload_form").bind("submit", function() { // above check });
321X
7
Sie könnten verwenden$('#file_field').change(function(){// above check});
Makki
3
$("#my_upload_form").bind("submit", function() { // above check });sollte jetzt mit $("#my_upload_form").submit(function() { // above check }); api.jquery.com/submit gebunden werden . Sie können auch verhindern, dass das Formular mit$("#my_upload_form").submit(function(e) { // above check e.preventDefault(); });
Liam
1
In diesem Fall würde ".jpg" FileUpload diese Datei als Bild akzeptieren , wenn der Benutzer beispielsweise eine MS Word-Datei hinzufügen würde. Ich denke es ist nicht richtig.
Jeyhun
3
Es ist erwähnenswert, dass dies keine narrensichere Methode ist. Stellen Sie am Ende des Tages sicher, dass Ihr Backend die ersten paar Bytes der Datei überprüft, um sicherzustellen, dass es genau den Dateityp enthält, den Sie wirklich möchten. Eine andere Sache, über die Sie nachdenken sollten, ist, dass Sie unter Linux und OSX eine Datei ohne Erweiterung haben können, die tatsächlich dem gewünschten Typ entspricht. Dies würde also auch in diesem Fall fehlschlagen
Chris
39

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.

Christian
quelle
6
Entschuldigung Bruder, aber das ist eine schlechte Regex. Dateien dürfen Punkte im Namen haben. "giel.asd.aaaaa.jpg.png" .match (/\.(.+)$/)
Tim Kretschmer
27

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

Julian Aubourg
quelle
Können Sie ein Beispiel dafür geben, wie dies mit plugins.krajee.com/file-input#option-allowedfileextensions auf IE11
shorif2000
25

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:

Dhruvpatel
quelle
1
So viel besser als mit JQuery
Christopher Grigg
19

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 />
Löwe
quelle
bekommt nicht was er braucht. Es dient lediglich der einfacheren Handhabung, ein Bild aus einem Ordner mit einer anderen Erweiterung auszuwählen. wie Sie hier sehen können -> imageshack.us/a/img20/8451/switchzz.jpg
bernte
Da es IE <10 nicht schadet und anderen Code nicht schadet, ist es eine effektive Einschränkung dessen, was Sie einschränken möchten.
Leo
4

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

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
    }
}
Avtandil Kavrelishvili
quelle
1

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; }
});
Abhi
quelle
1

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;
                    }
                });
Entwickler
quelle
Könnten Sie bitte vorschlagen, wie Sie die Bildgröße einschränken können? Zum Beispiel sollte ein Bild mit einer Größe von 10 MB nicht akzeptiert werden
PDSSandeep
@PDSSandeep Überprüfen Sie diesen Link pls stackoverflow.com/questions/6575159/…
Entwickler
0
<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>
Khaihkd
quelle
Dies kann Dateityp und -größe nicht überprüfen, getestet in FF.
Qammar Feroz
0

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

        }
    }
Jason Roner
quelle
0
    $("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 = '';
Die EasyLearn Academy
quelle
-1
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;
    }
Muhammad Saqib Sarwar
quelle
-1

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