it-swarm.com.de

jQuery Wie kann man prüfen, ob es sich bei der hochgeladenen Datei um ein Bild handelt, ohne die Erweiterungen zu prüfen?

Neuling hier. Das Problem ist, dass ich derzeit eine Methode geschrieben habe, die die Dateigröße und die Dateierweiterung überprüft, um sie zu überprüfen. Die Überprüfung 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 ihn ohne Verwendung der Erweiterungsmethode zu überprüfen. 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' />

Skript:

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 wird aufgerufen, sobald sich der Upload-Eingang ändert, und nach der Validierung wird das Bild hochgeladen und angezeigt. Im Moment kümmere ich mich nur um die Validierung, und jede Hilfe oder Idee wäre sehr dankbar!

14
Acallar

Versuchen Sie etwas so:

JavaScript

const file = this.files[0];
const  fileType = file['type'];
const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];
if (!validImageTypes.includes(fileType)) {
    // invalid file type code goes here.
}

jQuery

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.
}
40
Hoyen

Du brauchst hier keine Jquery.

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, wann eine Datei ein Bild ist.

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

 isImage(this.file[0]);

Update (es6)

mit der es6 includes-Methode wird es noch einfacher.

const isImage = (file) => file['type'].includes('image');
17
Mike Antoniadis

Hier ein kurzer Tipp, wenn Sie nur wissen möchten, ob es sich bei der Datei um ein Bild handelt:

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

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

Pls verweisen auf eine verwandte Abfrage hier . Die Antwort hier schlägt vor, das Bild in ein Bildobjekt zu laden und zu prüfen, ob die Eigenschaften für Breite und Höhe ungleich Null sind .. Ich denke, die Technik kann zur Lösung Ihres Problems verwendet werden.

Ich habe auch eine Geige erarbeitet, auf die Sie sich beziehen können. Relevanter Code unten:

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

Ich möchte den aktuellen Dateityp überprüfen

Versuchen Sie, auf die Eigenschaft files[0].type zuzugreifen. Siehe Dateien aus Webanwendungen verwenden

$(":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' />

2
guest271314

Wenn jemand kommt, der jQuery Validator verwendet, wäre dies eine einfache Methode:

jQuery.validator.addMethod(
    "onlyimages",
    function (value, element) {
        if (this.optional(element) || !element.files || !element.files[0]) {
            return true;
        } else {
            var fileType = element.files[0].type;
            var isImage = /^(image)\//i.test(fileType);
            return isImage;
        }
    },
    'Sorry, we can only accept image files.'
);

die dann zur .validate () - Funktion hinzugefügt wird.

1
Neil Thompson

Sie könnten versuchen, den Dateityp in eine Zeichenfolge umzuwandeln, und diese Zeichenfolge anschließend in folgende Teile schneiden:

if(String(file.type).slice(0, 6) === 'image/') {....some code}
0
Oleg Sewruk