jQuery - INPUT Typ = Datei, Image FileType Validierungsoptionen?

Question

Ich habe folgendes:

<input id="user_profile_pic" name="user[profile_pic]" type="file"> 

Auf dem Server ich überprüfen, um sicherzustellen, dass es ein Bild ist, aber ich möchte zunächst auf der Clientseite überprüfen.

Wie kann ich mit jQuery den Benutzer warnen, wenn die ausgewählte Eingabedatei kein gif, jpg, png oder bmp ist?

Dank

Answer 1

Sie möchten zu überprüfen, was der Wert des Elements ist, etwas entlang der Linien von:

$("#user_profile_pic").change(function() { 

    var val = $(this).val(); 

    switch(val.substring(val.lastIndexOf('.') + 1).toLowerCase()){ 
     case 'gif': case 'jpg': case 'png': 
      alert("an image"); 
      break; 
     default: 
      $(this).val(''); 
      // error message here 
      alert("not an image"); 
      break; 
    } 
}); 

bearbeiten

verän-Code basierend auf Kommentar - entfernt nun den Wert der ausgewählten Datei wenn nicht ein Bild.

Answer 2

könnten Sie einen regulären Ausdruck verwenden:

var val = $("#user_profile_pic").val(); 
if (!val.match(/(?:gif|jpg|png|bmp)$/)) { 
    // inputted file path is not an image of one of the above types 
    alert("inputted file path is not an image!"); 
} 

Natürlich könnte man mehr Formate zu dem regulären Ausdruck hinzuzufügen. Es gibt komplexere und umfassendere Möglichkeiten, dies zu erreichen, aber diese Methode wird die Aufgabe erfüllen, solange der eingegebene Bilddateipfad in einer Standardbilddateierweiterung endet.

Answer 3

Es kann Browser geben, mit denen Sie einen <img/> des angegebenen Pfads erstellen können, mit dem Sie überprüfen können, ob es ein echtes Bild ist oder nicht (wenn nicht das Onerror-Ereignis auf dem Bild ausgelöst werden soll und es eine Breite hat/Höhe von 0).

Aber da dies nur in einigen Browsern funktioniert und ein Sicherheitsrisiko darstellt (meiner Meinung nach) würde ich dies nicht empfehlen, daher lautet meine Antwort: Sie können dort nichts validieren.

Die Dateiendungen zu prüfen, wie von Alex vorgeschlagen, kann eine Option sein, aber die Dateierweiterung garantiert nicht, ob es ein Bild ist. Als eine einfache Vorprüfung (nicht Validierung) könnte es jedoch nützlich sein.

Answer 4

Es ist ziemlich einfach, benötigt keine JavaScript-Validierungen. Schreiben Sie das einfach und es akzeptiert nur Bilddateien.

<input type="file" multiple accept='image/*'> 

Answer 5

Wie können wir überprüfen, dass Benutzer wählt Bilddatei?

• Durch Dateierweiterung Validierung
  Es ist wie erwartet, Textdatei mit .png Erweiterung passieren hier
• input[type=file][accept=image/*] Es verbirgt sich zunächst non-image Dateien vom Benutzer. Aber dieser Filter funktioniert auch mit Erweiterungen. Der Benutzer kann weiterhin einen vorhandenen Dateinamen manuell eingeben.

• Wir können Mime-Typ Ergebnis dataUrl überprüfen, es beginnt mit data:mimetype;base64,.... Also, wir brauchen image/* Mimetype.

  var file = $('#uploadfile'); 
  file.on('change', function (e) { 
      var reader = new FileReader(); 
  
      reader.onload = function() { 
       var data = reader.result; 
       if (data.match(/^data:image\//)) { 
        $('#thumbnail').attr('src', data); 
       } else { 
        console.error('Not an image'); 
       } 
      }; 
  
      reader.readAsDataURL(file.prop('files')[0]); 
  });