2013-06-09 23 views
20

Ich verwende das Plugin dropzone.js, um meiner Anwendung einen Bild-Uploader hinzuzufügen. Ich weiß, das ist wahrscheinlich eine wirklich grundlegende Frage, also entschuldige ich mich, aber ich möchte die Dateierweiterungen einschränken. Dies funktioniert für eine einzelne Dateierweiterung,dropzone.js image upload accommendedMimeTypes

<script type="text/javascript"> 
    Dropzone.options.dropzone = { 
     accept: function(file, done) { 
      console.log(file); 
      if (file.type != "image/jpeg") { 
       done("Error! Files of this type are not accepted"); 
      } 
      else { done(); } 
     } 
    } 
</script> 

Also meine Frage ist, wie mehrere Dateierweiterungen hinzuzufügen, das heißt image/jpeg, image/png?

Dank

Antwort

11

Sie könnten mehr Erweiterungen zu Ihrem if hinzufügen, etwa so:

if (file.type != "image/jpeg" && file.type != "image/png") { 

Dies wird überprüfen, ob der Dateityp von allen Typen unterscheiden Sie angeben. Für eine Datei, um die Kontrolle zu übergeben, hat es von image/jpeg und image/png

aktualisiert

anders sein würde ich raten, bei enyo's answer zu suchen, da er der Autor von Dropzone ist.

+1

Vielen Dank, das funktioniert ein Vergnügen. – user1098178

81

Ich bin der Autor von Dropzone.

Sie sollten die acceptedMimeTypes acceptedFiles verwenden. Dies verhält sich genau so wie die input Element accept Eigenschaft. Auf diese Weise funktioniert auch der Fallback ordnungsgemäß.

Valid acceptedFiles Eigenschaften können wie folgt aussehen:

  • audio/*
  • image/*
  • image/jpeg,image/png
  • etc ...

EDIT: in den neuesten Versionen von Dropzone diese Eigenschaft y heißt acceptedFiles und ermöglicht es Ihnen, auch Erweiterungen zu definieren. So würde diese Arbeit:

"audio/*,image/*,.psd,.pdf"

(Für Rückwärtskompatibilität acceptedMimeTypes noch bis zur nächsten Major-Release arbeiten)

+3

Es wäre schön, eine ähnliche Immobilie zu haben, aber andersherum. Blockieren Sie bestimmte Dateitypen. Zum Beispiel verwende ich diesen Uploader in Verbindung mit PHP und es ist mir egal, welche Dateien sie hochladen, solange sie keine PHP-Dateien sind. Ich kann dies jetzt über PHP tun. Ich grabe wirklich diesen Uploader, den du gemacht hast, großartige Arbeit. – Ronnie

+0

@enyo Dies funktioniert nicht, wenn Sie die Datei ziehen und ablegen, es überprüft nicht den MIME-Typ –

+0

@enyo irgendwelche Infos über das Drag & Drop-Problem? –

5
var myDropzone = new Dropzone('div#profile_pictures',{ 
    acceptedFiles: "image/*"; /*is this correct?*/ 
    init: function(){ 
     this.on("success", function(file, data) { 
      /*..*/ 
      }); 
     } 
}) 
19

dank Enyo es funktioniert .... awesome ... nur einfügen, dass in dropjone.js- line>

uploadMultiple: true, (upload multiple files) 
maxFilesize: 1, (1 mb is here the max file upload size constraint) 
acceptedFiles: ".jpeg,.jpg,.png,.gif", 

http://www.dropzonejs.com/#config-acceptedFiles

Die Standardimplementierung von accept überprüft den Mime-Typ oder die Erweiterung der Datei anhand dieser Liste. Dies ist eine durch Kommas getrennte Liste von MIME-Typen oder Dateierweiterungen. Bsp .: 'image/*,application/pdf,.psd' Wenn die Dropzone anklickbar ist, wird diese Option als Accept-Parameter für die Eingabe der versteckten Datei verwendet.