web-dev-qa-db-fra.com

jQuery FileUpload ne déclenche pas 'done'

J'utilise jQuery-File-Upload plugin. J'ai écrit un code simple pour le tester - et cela fonctionne, mais pas sans problèmes. Cela ne déclenche pas done, même si le fichier est chargé et que la barre de progression atteint sa fin.

Voici le code:

$('#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');
    }
});

Mon entrée est aussi simple que cela:

<input type="file" id="file_file" name="file[file]" />
jqueryjquery-file-uploadblueimp
20
Tomek Buszewski

J'ai changé quelques choses et ça marche. Ici:

$('#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) {
            /**/
        });
    }
});
10
Tomek Buszewski

Si votre serveur ne renvoie pas de code JSON, essayez de supprimer:

dataType: 'json'

Sinon, vous risquez de vous retrouver avec un événement d'échec, facile à tester pour

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

J'ai réparé avec autoUpload: true , il semble que lorsque la propriété autoUpload n'est pas définie (même si l'envoi fonctionne comme prévu), l'événement done n'est pas déclenché.

5
Juanmi Taboada

Essayez cette option de rappel comme décrit dans la documentation:

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

Cela fonctionne bien pour moi.

1
Waqleh

Expérimenté aujourd'hui! Si vous utilisez PHP, assurez-vous que votre fichier uploadhanler PHP ne contient pas d'erreur ni d'avertissement. Il crée une sortie JSON incorrecte et lorsque le fichier est chargé, le plug-in ne peut pas envoyer un tampon JSON correct avec l'événement done.

Pour le suivi des erreurs sur votre fichier PHP, il est préférable d'écrire un fichier journal plutôt que d'afficher des erreurs sur de tels scripts. Vous pouvez utiliser:

error_reporting(0)

Mais NE PAS OUBLIER pour ajouter le suivi des erreurs dans un fichier journal. Bien sûr !

0
YlianEstevez

j'utilise multer, multer-Azure-storage et blueimp-file-upload. tous servis de unpkg.com. ci-dessous est un téléchargement de plusieurs fichiers avec le déclencheur done. travaillant à partir du 22/10/17.

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

page html, desservie par express: 

      $('#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 la propriété]/gallery

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/my-listings/edit/[id de la propriété]/gallery

 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();
    }
);
0
xemasiv