web-dev-qa-db-fra.com

jQuery fileupload - Récupère la liste des fichiers téléchargés

J'utilise le très bon plugin jquery blueimp/jQuery-File-Upload

$('#fileupload').fileupload({
  autoUpload: true
, filesContainer: '#attachments_presentation tbody'
, stop: function (e) {
    console.log(data);
  }
});

Et je ne suis pas capable de faire quelque chose de très simple: obtenir la liste des fichiers téléchargés
(avec leur nom sur le serveur)

Tout d’abord, je pensais naïvement qu’il serait stocké dans l’entrée de fichier afin d’obtenir la liste avec

$('#fileupload').val();

Mais ce n'est pas, alors je pensais à propos de quelque chose comme

$('#fileupload').fileupload('getfiles');

Je ne trouve pas le chemin depuis la documentation

Quelqu'un peut-il me dire comment obtenir la liste des noms de fichiers téléchargés sur le serveur?

Mise à jour

Je voudrais obtenir le nom des fichiers téléchargés sur le server afin de pouvoir les gérer après.

Par exemple:

  • Je télécharge un fichier nommé trutruc.pdf
  • Je télécharge test.png
  • Je re-télécharge un fichier nommé trutruc.pdf
  • Je supprime le premier fichier

La liste actuelle des fichiers sur le serveur devrait alors être test.png, trutruc (2).pdf

Mise à jour 2

J'utilise le script php par défaut fourni avec fileUpload

javascriptjqueryfile-uploadjquery-file-upload
8
Pierre de LESPINAY

Lorsque vous instanciez le plug-in par défaut, une partie de code récupère tous les fichiers précédemment téléchargés (en supposant que vous n'avez pas modifié le code du serveur):

Voir à la ligne 70 du fichier main.js:

    // Load existing files:
    $.ajax({
    // Uncomment the following to send cross-domain cookies:
    //xhrFields: {withCredentials: true},
    url: $('#fileupload').fileupload('option', 'url'),
        dataType: 'json',
        context: $('#fileupload')[0]
    }).done(function (result) {
        $(this).fileupload('option', 'done')
            .call(this, null, {result: result});
    });

Si vous cherchez plus loin dans votre code, il y a un tableau qui sera rempli avec le template:

<table role="presentation" class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>

Vous pouvez facilement analyser chacun de cette table après avoir chargé les fichiers:

$('tbody.files tr').each(function(i, e) {
    //according to @Brandon's comment it's now p.name
    var name = $(e).find('td.name').text(); 
    var size = $(e).find('td.size').text();
    //etc.
});
9
soyuka

J'utilise la version de l'interface utilisateur. Voici un script qui saisit les liens de serveur à partir d'une table de fichiers et remplit un tableau:

    var files = new Array();
    $("#fileupload td p.name a").each(function() {
        var name = $(this).attr("href");
        files.Push(name);
    });
    alert(files.join('\n'));
9
Eugene Mala

vous pouvez aussi essayer ceci 

 $('#fileupload').bind('fileuploadcompleted', function (e, data) {
     var filess= data.result.files[0];
        var filenam = filess.name;
       alert(filenam);
});
2
Harpreet Kaur

J'ai eu le même problème et après quelques heures et des dizaines de téléchargements de fichiers, je pense avoir la réponse qu'il vous faut:

done: function (e, data) {
    response = data.response();
    parsedresponse = $.parseJSON(response.result);
    console.log(parsedresponse.files);
}

Comme vous pouvez le constater, vous trouverez le nom du fichier téléchargé à parsedresponse.files[i].url ( i est l’index de base 0 des fichiers téléchargés).

Ok ... c'est l'URL du fichier téléchargé, mais vous pourrez extraire le nom du fichier final ...

J'espère que cela vous aidera. (Ceci n’est nulle part dans la documentation, j’ai réussi à accéder à cette solution en vérifiant les sorties de la console Firebug)

1
Alexandre Paulo

Pour obtenir la liste des noms de fichiers téléchargés à partir du server , vous devez disposer d'un code côté serveur:

UploadHandler.php est utilisé pour télécharger des fichiers dans un répertoire/s sur votre serveur.

Si vous avez téléchargé l'archive du plug-in et l'avez extraite sur votre serveur, les fichiers seront stockés dans les fichiers php/fichiers par défaut. (Assurez-vous que le répertoire php/files dispose des droits en écriture pour le serveur.) ____.] voir: https://github.com/blueimp/jQuery-File-Upload/wiki/Setup

UploadHandler.php _ est simplement un gestionnaire de téléchargement. Il ne permet pas d'accéder aux fichiers du serveur sans connexion au serveur.

JavaScript ne peut pas accéder aux fichiers du server , vous aurez donc besoin d’un script php pour le faire. (Bien que JavaScript puisse éventuellement garder une trace de tout ce qui a été téléchargé, renommé et supprimé.)

Vous pouvez modifier UploadHandler.php pour vous connecter à votre base de données et écrire les chemins de fichiers (et toute autre donnée) dans une table de fichiers lors du téléchargement. Vous pouvez ensuite accéder à vos fichiers via SQL standard. requêtes:

Modifier UploadHandler.php:

  1. Ajoutez vos paramètres de connexion à la base de données
  2. Écrire une fonction de requête SQL
  3. Ecrivez une seconde fonction pour effectuer votre requête
  4. Appelez la deuxième fonction

voir: https://github.com/blueimp/jQuery-File-Upload/wiki/Working-with-databases

1
DavidS

C'est un article assez ancien, mais c'est quelque chose qui a très bien fonctionné pour moi, alors j'ai pensé le poster.

  1. Lier l’événement à FileUploader (je l’ai fait dans main.js):

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

  2. Dans votre fichier html, utilisez le code suivant pour obtenir le nom du fichier:

    function FileUploadDone(e, data) {
for (x in data._response.result.files){
    if (data._response.result.files[x].error == "")
        alert(data._response.result.files[x].name);
    else
        alert(data._response.result.files[x].error);
}}

Vous devriez regarder l'objet de données dans firebug. Cet objet encapsule la plupart des informations.

1
Jiten

Si vous utilisez le plug-in de base comme indiqué dans la documentations vous devez transmettre les données à la fonction dans l'attribut done. Changez ceci:

stop: function (e) {

pour ça:

done: function (e, data) {

Je ne sais pas à propos de l'arrêt si vous l'obtenez depuis l'une des pages de documentation, alors je pense que la même chose s'applique ici, vous ne pouvez pas travailler avec des données si elles ne sont pas disponibles.
Espérons que cette aide

0
Yahya KACEM

pour obtenir la liste des fichiers sur le téléchargement terminé:

$('#fileupload').bind('fileuploadfinished', function (e, data) {
   console.log(data.originalFiles);
});
0
Shashank Kumar
 // Initialize the jQuery File Upload widget:
                $('#edit-product').fileupload({
                    // Uncomment the following to send cross-domain cookies:
                    //xhrFields: {withCredentials: true},
                    disableImageResize: false,
                    autoUpload:false,
                    url: 'YOURURL'
                }).bind('fileuploaddone', function (e, data) {
                    console.log(data.result.files[0]);   
                });
0
Ammar Jabakji

essayez la méthode done et mettez les noms en entrée cachée, puis sélectionnez-les:

$('#fileupload').fileupload({
  autoUpload: true
, filesContainer: '#attachments_presentation tbody'
, stop: function (e) {
    console.log(data);
  }
, done: function(e,data){
            var filess= data.files[0];
            var filenam = filess.name;
            data.context.text(filenam+' uploaded successfully.');
            $('#formId').append('<input type="hidden" name="fileName" value="'+filenam+'"/>');
}
});
0
Mohamed Ali