0

Hola comunidad tengo el siguiente problema con blueimp fileupload. quiero subir sola una imagen al servidor. Pero cuando selecciono en el input de tipo file varias veces y selecciono distintas imágenes recibo todas esas imágenes como si estuviera guardado en dicho input el listado de imágenes. En mi input borre el atributo múltiple y name="file" no funciono.

mi código de jquery es:

$('#photo_news').fileupload({
            url: '/_uploader/gallery/upload',
            type: 'POST',
            multipart: true,
            dataType: 'json',
            autoUpload: false,
            singleFileUploads: true,
            maxNumberOfFiles : 1,
            replaceFileInput: false,
            add: function(e, data){



                $("#form_news").submit(function(e){

                    e.preventDefault();

                    data.formData = $("#form_news").serializeArray();
                    data.submit();


                });

            },
            done: function(e, data) {

                if(data){
                    window.location.reload();
                }

            },

            error: function(e, data){

                console.log(data);

            }

        });
7
  • te a pasado seleccionando mas de dos imágenes?
    – Asney
    el 29 ene. 2018 a las 14:23
  • correcto. si selecciono 2 o mas imagenes se siguen guardando y al enviar al servidor llega todas esas imageness que seleccione el 29 ene. 2018 a las 14:23
  • #file-news supongo es el id del input tuyo , hagamos algo , agrega este código jquery y veamos si te devuelve siempre el ultimo elemento que seleccionaste $('#upload-input').on('change', function () {var files = $(this).get(0).files; console.log(files[files.length - 1])})
    – Asney
    el 29 ene. 2018 a las 14:33
  • #photo_news es mi id "INPUT FILE", lo agrego en add: function(e, data) correcto? el 29 ene. 2018 a las 14:36
  • Agregue afuera y me muestra el file cada ves que seleciono uno. el 29 ene. 2018 a las 14:38

2 respuestas 2

0

Te voy a enseñar otra manera de mandar el input al servidor , y de esta manera controlaremos que sea el ultimo elemento seleccionado, puedes mantener la propiedad name="file" que tenias anteriormente:

$('#upload-input').on('change', function () {
       //files tendrá todos los elementos que sean seleccionados, o el único que se seleccione
    var files = $(this).get(0).files;

        var formData = new FormData();
              //si se seleccionaron varios elementos file sera el ultimo que se selecciono
        var file = files[files.length-1];
        formData.append('file', file, file.name);


        $.ajax({
            url: '/_uploader/gallery/upload',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            xhr: function () {
                //este xhr es por si quieres llenar alguna barra de progreso
                var xhr = new XMLHttpRequest();
                xhr.upload.addEventListener('progress', function (evt) {
                    if (evt.lengthComputable) {
                        var percentComplete = evt.loaded / evt.total;
                        percentComplete = parseInt(percentComplete * 100); // esta variable contiene por que % esta la subida
                        if (percentComplete === 100) {
                            // aquí pones que ocurrirá cuando el % sea 100%
                        }
                    }
                }, false);
                return xhr;
            }
        }).done(function (data) {
            //aquí declaras lo que ocurrirá cuando se termine de subir el fichero
        });

});

Nota: recuerda que si estas utilizando tu input para subir solo imágenes, al input puedes incluirle la propiedad accept para definir que tipos de imágenes subir, por ejemplo accept="image/png, .jpeg, .jpg, image/gif"

Ten en cuenta que con lo que te implemente anteriormente en el momento que se realiza la selección , auto-seguido se hace la petición y se envía al servidor , si deseas separarlo , tendrías que poner la función $.ajax() en una función aparte , y llamarla cuando desees que se envié.

0

Probe de otra manera ya que la idea es hacer funcionar con la libreria ya que uso un bundle para symfony y trabajand juntos.

probe de la siguiente manera en este codigo donde solo envia una imagen y no se repite. pero toma la primera imagen y no la ultima.

antes del submit en add. puse al input file disable con fileupload...

$('#photo_news').fileupload({
            url: '/_uploader/gallery/upload',
            type: 'POST',
            multipart: true,
            dataType: 'json',
            autoUpload: false,
            singleFileUploads: true,
            replaceFileInput: false,
            maxNumberOfFiles: 1,

            add: function(e, data){

                $("#photo_news").fileupload('disable');

                $("#form_news").submit(function(e){

                    e.preventDefault();

                    data.formData = $("#form_news").serializeArray();
                    data.submit();


                });

            },
            done: function(e, data) {

                if(data){
                    window.location.reload();
                }

            },

            error: function(e, data){

                console.log(data);

            }

        });

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.