Estoy utilizando el dropzone.js plugin para añadir una imagen uploader para mi aplicación. Sé que esto probablemente es realmente una cuestión básica así que disculpas pero lo que quiero hacer es limitar las extensiones de archivo. Esto funciona para un solo archivo de extensión,

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

Así que mi pregunta es cómo agregar varias extensiones de archivo, es decir,image/jpeg, image/png?

Gracias

InformationsquelleAutor user1098178 | 2013-06-09

6 Comentarios

  1. 14

    Podría añadir más extensiones a su if, así:

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

    Esta forma se comprueba si el tipo de archivo es diferente de TODOS los tipos que usted especifique. Para un archivo para pasar la verificación, tiene que ser diferente de la imagen/jpeg, image/png

    Actualización

    Yo le aconsejo mirar enyo la respuesta ya que él es el autor de Dropzone.

    • Un gran «gracias», que funciona de maravilla.
  2. 108

    Soy el autor de Dropzone.

    Debe utilizar el acceptedMimeTypes acceptedFiles. Este se comporta exactamente de la misma como la input del elemento accept de la propiedad. De esta manera, incluso el retroceso funcionará correctamente.

    Válido acceptedFiles propiedades puede tener este aspecto:

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

    EDITAR: en las últimas versiones de Dropzone esta propiedad se llama acceptedFiles y permite también definir las extensiones. Por lo que este trabajo:

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

    (Para la compatibilidad hacia atrás acceptedMimeTypes seguirá funcionando hasta que la próxima versión mayor)

    • Sería bueno tener una propiedad similar pero al revés. Bloquear determinados tipos de archivos. Por ejemplo, estoy usando este uploader en conjunto con PHP y no me importa lo que los archivos que suben como siempre que no sean archivos de PHP. Me puede hacer esto a través de PHP, por ahora. Realmente estoy diggin este uploader que hizo a pesar de que, gran trabajo.
    • Esto no funciona cuando usted arrastre y suelte el archivo, no lo comprueba el tipo mime de los
    • cualquier información acerca de los drag & drop problema?
    • Mi experiencia ha sido que uno debe blanca por tanto el tipo MIME y la extensión, sin embargo, la documentación parece decir nada de este requisito. No estoy seguro de si esto es debido a que el tipo MIME que no se detecta correctamente (o a todos), o si este requisito es intencional. He visto a otros mencionan la misma, que es la razón por la que sabía cómo abordar el tema cuando me encontré con él.
  3. 26

    gracias enyo funcionó ….impresionante…sólo tienes que pegar esa línea en dropjone.js->

    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

    La implementación predeterminada de aceptar comprueba el archivo de la extensión o tipo mime contra de esta lista. Esta es una lista separada por comas de los tipos mime o extensiones de archivo. Ej.: 'image/*,application/pdf,.psd'
    Si la Dropzone se puede hacer clic en esta opción se utiliza como aceptar parámetro en el archivo oculto de entrada así.

  4. 6
    var myDropzone = new Dropzone('div#profile_pictures',{
        acceptedFiles: "image/*", /*is this correct?*/
        init: function(){
            this.on("success", function(file, data) {
                /*..*/
                });
            } 
    })
    • acceptedFiles: "image/*", es correcta, Reemplace ; con ,
  5. 0
    var dz = $("#FileUpload").dropzone({acceptedFiles: ".jpeg"})[0];
    • De Revisión: Hola, por favor, no responda sólo con el código fuente. Tratamos de proporcionar una buena descripción acerca de cómo su solución funciona. Ver: ¿Cómo puedo escribir una buena respuesta?. Gracias
    • Mientras que esto puede responder a los autores en cuestión, carece de explicación de las palabras y/o enlaces a la documentación. Raw fragmentos de código no son muy útiles sin algunas frases en torno a ellos. Usted también puede encontrar cómo escribir una buena respuesta muy útil. Por favor, edita tu respuesta – De Revisión
  6. 0

    En caso de que alguien esté interesado (no puedo comentar en Enyo del post):
    He tenido problemas con la aplicación de la Dropzone opciones y, después de investigar me he dado cuenta de que la versión de jQuery jquery-3.2.1.min.js que yo estaba usando era la causa de su mal funcionamiento

Dejar respuesta

Please enter your comment!
Please enter your name here