jQuery File Upload prévisualiser les fichiers sélectionnés

Question

J'ai un formulaire et j'ai besoin de télécharger plusieurs fichiers et je commence avec le plugin de base de jQuery File Upload. Cependant Im essayant d'accomplir la chose d'aperçu que la démo montre, et j'ai lu les docs comme https://github.com/blueimp/jQuery-File-Upload/wiki/Template-Engine et suivons le code mais mon aperçu ne fonctionne pas du tout et je ne sais pas ce que je manque. Mon code ressemble à ceci:

<a href="#" id="upload">upload files</a> 
<input style="visibility: hidden;" id="fileupload" type="file" name="files[]" data-url="{{ asset('/bundles/testetestebundleblueimp/js/jQuery-file-upload/server/php/index.php') }}" multiple> 
<input type="button" value="upload" id="upload-files"/> 

<table role="presentation" class="table table-striped"><tbody class="files"></tbody></table> 

maintenant le script:

$('#upload').live('click', function(){ 
     $('#fileupload').click(); 
     return false;  
    }); 

$(function() { 
    $('#fileupload').fileupload({ 
     dataType: 'json', 
     autoUpload : false, 
     uploadTemplateId: null, 
     downloadTemplateId: null, 
     uploadTemplate: function (o) { 
     var rows = $(); 
     $.each(o.files, function (index, file) { 
      var row = $('<tr class="template-upload fade">' + 
       '<td class="preview"><span class="fade"></span></td>' + 
       '<td class="name"></td>' + 
       '<td class="size"></td>' + 
       (file.error ? '<td class="error" colspan="2"></td>' : 
         '<td><div class="progress">' + 
          '<div class="bar" style="width:0%;"></div></div></td>' + 
          '<td class="start"><button>Start</button></td>' 
       ) + '<td class="cancel"><button>Cancel</button></td></tr>'); 
      row.find('.name').text(file.name); 
      row.find('.size').text(o.formatFileSize(file.size)); 
      if (file.error) { 
       row.find('.error').text(
        locale.fileupload.errors[file.error] || file.error 
       ); 
      } 
      rows = rows.add(row); 
     }); 
     return rows; 
    }, 
     done: function (e, data) { 
      alert('done'); 
     }, 
     add : function(e, data) { 
      $.each(data.files, function (index, file) { 
        console.log('Added file: ' + file.name); 
      });    
      $("#upload-files").on("click", function() { 
        $('#progress .bar').show();      
        data.submit(); 
        $("#upload-files").off("click"); 
      }); 
     }    
    }); 
}); 

Mon but est ici pour permettre à l'utilisateur de sélectionner les fichiers et les afficher dans un récipient. Lorsque l'utilisateur clique sur "upload-files" je veux envoyer tous les fichiers qui sont dans le conteneur, tout comme la démo.

Answer 1

Vous manquez de tout type de données/ressources.

Jetez un oeil ici.

signifie que vous avez besoin beaucoup plus que le jsFiddle. Maintenant, parce que je n'avais pas la possibilité de télécharger des fichiers à un emplacement, je n'ai pas pu tester plus loin. J'ai reçu une erreur en utilisant jsfiddle, mais je suis sûr que vous pouvez avoir votre propre emplacement de serveur à télécharger.

Mise à jour
Pour une raison quelconque, votre data.files[index].thumbnail_url n'est pas réglé dans votre fonction add.
La seule façon pour moi d'obtenir abuse de la propriété file.name:

add : function(e, data) { 

    console.dir(arguments); 

    $.each(data.files, function (index, file) { 
     console.log(file, file.thumbnail_url); 
     console.log('Added file: ' + file.name); 
     document.body.innerHTML += '<img src="server/php/files/' + file.name + '">'; 
    }); 

    $("#upload-files").on("click", function() { 
     $('#progress .bar').show();      
     data.submit(); 
     $("#upload-files").off("click"); 
    }); 
}