jQuery FileUpload ne déclenche pas "terminé"

- Je utiliser jQuery-File-Upload plugin. J'ai écrit un code simple pour le tester et il fonctionne, mais pas sans problèmes. Il ne déclenche done, même si le fichier est téléchargé et 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]" />
InformationsquelleAutor Tomek Buszewski | 2013-02-03
  1. 28

    Si votre serveur n'est pas le retour JSON, essayez de supprimer:

    dataType: 'json'

    Sinon, vous pouvez peut-être se retrouver avec un "fail", qui est facile à tester:

    fail: function(e, data) {
  alert('Fail!');
}
    • heh... Cela a résolu mon problème. Dans le cas où la sortie JSON est buggé, fait de rappel n'est pas déclenché. Sonne bien, mais j'étais à la recherche pourquoi le rappel n'est pas déclenché, avant de vérifier JSON.
    • Cela a résolu mon problème aussi. merci!!!!
    InformationsquelleAutor bradw2k
  2. 10

    J'ai changé quelques choses et il fonctionne. 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) {
            /**/
        });
    }
});
    • Des œuvres. Notez que vous devez modifier des données".résultat."fichiers de données".les fichiers".
    • la solution pour pousser les fichiers dans IE < 10 est tout au sujet des données".submit();" dans le add de rappel.
    • "les données.résultats.les fichiers" contient plus de choses, comme thumbnailUrl et le "nom" est le nom du fichier le fichier sur le serveur au lieu de données.les fichiers " nom qui vous donne le nom que l'utilisateur a pour le fichier.
    InformationsquelleAutor Tomek Buszewski
  3. 5

    J'ai réparé avec autoUpload: vrai, ça ressemble quand la autoUpload propriété n'est pas définie (même si l'upload fonctionne comme prévu) le fait de l'événement n'est pas déclenché.

    InformationsquelleAutor Juanmi Taboada
  4. 1

    Essayer cette Option de Rappel comme décrit dans la documentation:

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

    C'est sûr qu'il fonctionne pour moi.

    • Ce qui a fonctionné pour moi.Cette fonction fonctionne avec les anciennes version
    InformationsquelleAutor Waqleh
  5. 0

    Expérimenté aujourd'hui! Si vous utilisez PHP, assurez-vous que votre uploadhanler fichier PHP n'affiche pas d'erreur ou d'avertissement. Il crée une mauvaise sortie JSON et lorsque votre fichier est téléchargé, le plugin ne peut pas envoyer un bonne JSON tampon avec fait événement.

    Pour les erreurs de suivi sur votre fichier PHP, il est préférable d'écrire un fichier journal au lieu d'afficher les erreurs sur les scripts de ce genre. Vous pouvez utiliser:

    error_reporting(0)

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

    InformationsquelleAutor YlianEstevez
  6. 0

    je suis en utilisant multer, multer-azure-de stockage et de blueimp-file-upload. le tout, servi à partir de unpkg.com. ci-dessous est un multiple upload de fichier avec le fait déclencheur. travail d'10/22/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>

    html de la page, servi à partir de l'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);
          }
      });

    //OBTENIR /mon-listes/modifier/propriété[id]/galerie

    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 /mon-listes/modifier/propriété[id]/galerie

     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();
    }
);
    InformationsquelleAutor xemasiv
  7. -1
     $(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);

       }


   });

    fonctionne parfaitement pour moi;

    différences sont

    • l'url est définie (j'espère que vous avez juste oublié de le mettre dans votre extrait ici);

    • la façon dont je ajouter un fichier de la file d'attente de téléchargement

    • séquentielle télécharger (?)

    edit :

    Le jQuery File Upload plugin permet l'utilisation de jQuery.ajax() du fichier
    télécharger des demandes. Cela est vrai même pour les navigateurs sans soutien
    XHR, grâce à l'Iframe de Transport plugin.

    Les options définies pour l'Upload de Fichier plugin sont passés à jQuery.ajax()
    et de permettre à définir toute ajax paramètres ou des rappels. L'ajax options
    processData, contentType et le cache sont mis à false pour le fichier
    les envois de travail et ne doit pas être changé.

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

    quelque part dans votre code, vous pourriez avoir aussi changé ces ajax paramètres; de toute façon qui dit que si vous avez vos paramètres de droit, car il rend l'utilisation de $.ajax le fait ne peut pas être déclenché

    InformationsquelleAutor mikakun