jQuery wie überprüft man, ob die hochgeladene Datei ein Bild ist, ohne Erweiterungen zu überprüfen?

Question

Neuling hier. Das Problem ist, dass ich derzeit eine Methode geschrieben habe, die hochgeladene Dateigröße und Erweiterung überprüft, um sie zu validieren. Das Überprüfen von Erweiterungen ist jedoch keine Lösung, da diese Art der Validierung viele Probleme verursachen kann. Was ich tun möchte, ist, den tatsächlichen Dateityp zu überprüfen und zu validieren, ohne die Erweiterungsmethode zu verwenden. Ich habe versucht, jQuery file validator zu verwenden, aber ohne Erfolg ... Dies ist ein Ausschnitt aus meinem aktuellen Code:

<input type='file' id='imageLoader' name='imageLoader' accept="image/*" data-type='image' /> 

Script:

App.Dispatcher.on("uploadpic", function() {   
     $(":file").change(function() { 
      if (this.files && this.files[0] && this.files[0].name.match(/\.(jpg|jpeg|png|gif)$/)) { 
       if(this.files[0].size>1048576) { 
        alert('File size is larger than 1MB!'); 
       } 
       else { 
        var reader = new FileReader(); 
        reader.onload = imageIsLoaded; 
        reader.readAsDataURL(this.files[0]); 
       } 
      } else alert('This is not an image file!'); 
     }); 
     function imageIsLoaded(e) { 
      result = e.target.result; 
      $('#image').attr('src', result); 
     }; 
    }); 

Es sobald die Upload-Eingangsänderungen aufgerufen wird und nach der Validierung es lädt das Bild hoch und zeigt es an. Für jetzt interessiert mich nur Validierung und jede Hilfe oder Ideen würde sehr geschätzt werden!

Answer 1

Probieren Sie etwas wie folgt aus:

var file = this.files[0]; 
var fileType = file["type"]; 
var ValidImageTypes = ["image/gif", "image/jpeg", "image/png"]; 
if ($.inArray(fileType, ValidImageTypes) < 0) { 
    // invalid file type code goes here. 
} 

Answer 2

Was ich tun möchte, ist die tatsächliche Dateityp

Versuchen Sie den Zugriff auf files[0].type Eigenschaft zu überprüfen. Siehe Using files from web applications

$(":file").on("change", function(e) { 
 

 
    console.log(this.files[0].type); 
 
    
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type='file' id='imageLoader' name='imageLoader' accept="image/*" data-type='image' />

Answer 3

Pls beziehen sich eine ähnliche Abfrage here. Die Antwort hier schlägt vor, das Bild in ein Image-Objekt zu laden und zu überprüfen, ob seine Breite und Höhe nicht Null sind. Ich denke, dass die Technik verwendet werden kann, um Ihr Problem zu lösen.

Ich arbeitete auch eine fiddle für Sie zu verweisen. Einschlägige Code unten:

var img = new Image(); 
img.addEventListener("load",function(){ 
    alert('success'); 
}); 
img.addEventListener("error",function(){ 
     alert('error'); 
}); 
    img.src = picFile.result; 

Answer 4

Sie nicht jquery hier brauchen.

var mimeType=this.files[0]['type'];//mimeType=image/jpeg or application/pdf etc... 


//ie image/jpeg will be ['image','jpeg'] and we keep the first value 
    if(mimeType.split('/')[0]=='image'){ 
     console.log('the file is image'); 
    } 

Sie können auch eine Funktion erstellen, um zu prüfen, ob eine Datei ein Bild ist.

function isImage(file){ 
    return file['type'].split('/')[0]=='image');//returns true or false 
} 

isImage(this.file[0]); 

Answer 5

Hier ist ein kurzer Tipp, wenn Sie wollen nur wissen, ob die Datei ein Bild ist:

var file = this.files[0]; 
var fileType = file["type"]; 

if (fileType.search('image') >= 0) { 
    ... 
}