mvc - jQuery FileUpload no dispara ''hecho''

multiple file upload

Question

Yo uso jQuery-File-Upload plugin. Escribí un código simple para probarlo, y funciona, pero no sin problemas. No se dispara, incluso si el archivo se carga y la barra de progreso llega a su fin.

Aquí está el código:

$(''#file_file'').fileupload({
    dataType: ''json'',
    autoUpload: true,
    add: function (e, data) {
        data.context = $(''<p/>'').text(''Uploading...'').appendTo(document.body);
        data.submit();
    },
    progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $(''#progress .bar'').css(
            ''width'',
            progress + ''%''
        );
    },
    done: function (e, data) {
        alert(''Done'');
    }
});

Mi entrada es tan simple como eso:

<input type="file" id="file_file" name="file[file]" />

Answer 1

Cambié un par de cosas y funciona. Aquí:

$(''#file_file'').fileupload({
    autoUpload: true,
    add: function (e, data) {
        $(''body'').append(''<p class="upl">Uploading...</p>'')
        data.submit();
    },
    progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $(''#progress .bar'').css(
            ''width'',
            progress + ''%''
        );
    },
    done: function (e, data) {
        $(''.upl'').remove();
        $.each(data.files, function (index, file) {
            /**/
        });
    }
});

Answer 2

Estoy usando multer, multer-azure-storage y blueimp-file-upload. todo servido desde unpkg.com. A continuación se muestra una carga de varios archivos con el activador hecho. trabajando a partir del 22/10/17.

archivo js:

  <script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script>
  <script src="https://unpkg.com/[email protected]/js/vendor/jquery.ui.widget.js"></script>
  <script src="https://unpkg.com/[email protected]/js/jquery.iframe-transport.js"></script>
  <script src="https://unpkg.com/[email protected]/js/jquery.fileupload.js"></script>

página html, servida desde expreso:

      $(''#fileupload'').fileupload({
          url: ''https://domainwhatevs/my-listings/edit/[property id]/gallery'',
          paramName: ''_file'',
          dataType: ''json'',
          type: ''POST'',
          autoUpload: true,
          add: function (e, data) {
              console.log(''uploading:'', data)
              data.submit();
          },
          done: function (e, data) {
              console.log(''done triggered'');
              console.log(data._response.result.result[0].originalname, ''uploaded at'', data._response.result.result[0].url);
              $.each(data.files, function (index, file) {
                // console.log(file.name, ''uploaded.'')
                // console.log(''done'');
                // console.log(index);
                // console.log(file);
              });
              console.log(data);
          }
      });

// GET / my-Listings / edit / [id de propiedad] / galería

app.get(
    [
        ''/my-listings/edit/:_id/gallery''
    ],
    (req, res) => {
        console.log(''image gallery:'', req.params._id);
        res.render(''my-listings--edit--gallery'', {
            _id: req.params._id,
            session: req.session
        });
    }
);

// POST / mis-listados / editar / [id de propiedad] / galería

 app.post(
    [
        ''/my-listings/edit/:_id/gallery''
    ],
    upload.array(''_file''),
    (req, res, next) => {
        console.log(req.files);
        res.setHeader(''Content-Type'', ''application/json'');
        res.send({result: req.files});
        next();
    }
);

Answer 3

Experimentado hoy! Si está utilizando PHP, asegúrese de que su archivo PHP de uploadhanler no muestre un error o advertencia. Crea una salida JSON incorrecta y, cuando se carga su archivo, el complemento no puede enviar un búfer JSON correcto con el evento done.

Para el seguimiento de errores en su archivo PHP, es mejor escribir un archivo de registro en lugar de mostrar errores en dichos scripts. Puedes usar:

error_reporting(0)

Pero NO OLVIDE agregar el seguimiento de errores en un archivo de registro. Por supuesto !

Answer 4

Pruebe esta opción de devolución de llamada como se describe en la documentación:

$(''#fileupload'').bind(''fileuploaddone'', function (e, data) {
    alert(''Done'');
});

Seguro que funciona para mí.

Answer 5

Si su servidor no está devolviendo JSON, intente eliminar:

dataType: ''json''

De lo contrario, puede terminar con un evento fallido, que es fácil de probar para:

fail: function(e, data) {
  alert(''Fail!'');
}

Answer 6

Reparé con autoUpload: verdadero , parece que cuando la propiedad autoUpload no está establecida (incluso si la carga funciona como se esperaba) el evento hecho no se desencadena.

Answer 7

 $(input).fileupload(

       url      : ''...''

      ,dataType : ''json''
      ,sequentialUploads : true

       ,add      : function (e,data) {


           $.each(data.files,function(i,file){

                file.jqXHR = data.submit()
                           .success(function (result, textStatus, jqXHR) {/* ... */})
                           .error(function (jqXHR, textStatus, errorThrown) {
                             })
                           .complete(function (result, textStatus, jqXHR) { 
                               //...                   
                                     });

                 });
       }


       ,done: function (e, data) {
         console.log(data);

       }


   });

funciona perfectamente para mi

las diferencias son

• la url está establecida (espero que haya olvidado ponerla en su fragmento aquí);

• la forma en que agrego el archivo a la cola de descarga

• carga secuencial (?)

editar:

El complemento de carga de archivos jQuery utiliza jQuery.ajax () para las solicitudes de carga de archivos. Esto es cierto incluso para los navegadores sin soporte para XHR, gracias al complemento Iframe Transport.

Las opciones establecidas para el complemento de carga de archivos se pasan a jQuery.ajax () y permiten definir cualquier configuración de ajax o devoluciones de llamada. Las opciones ajax processData, contentType y cache están configuradas en falso para que las cargas de archivos funcionen y no deben cambiarse.

https://github.com/blueimp/jQuery-File-Upload/wiki/Options

En algún lugar de su código también podría haber cambiado la configuración de ajax; De todos modos, eso dice que si tienes la configuración correcta, ya que está utilizando $ .ajax, el hecho no se puede activar.