Afficher plusieurs images téléchargées avec FilePicker.io

J'ai essayé d'implémenter l'API FilePicker.io pour permettre aux utilisateurs de télécharger des images sur une page de produit et j'ai essayé désespérément d'afficher les fichiers téléchargés (images seulement) sur la page. Le Filepicker s'ouvre bien, je peux télécharger l'image avec succès etc, donc après avoir téléchargé un fichier, je peux voir dans la console que j'ai un objet avec des informations sur le fichier nouvellement téléchargé. Tout ce que je veux maintenant est d'afficher les images, en utilisant $ .ajax POST? Voici le code que j'ai jusqu'à présent:Afficher plusieurs images téléchargées avec FilePicker.io

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<title>Upload</title> 
<link rel="stylesheet" href="style.css"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="//api.filepicker.io/v2/filepicker.js"></script> 
<script type="text/javascript"> 
$(function() { 
    filepicker.setKey('l5uQ3k7FQ5GoYCHyTdZV'); 

    $('#big-freaking-button').click(function() { 
    filepicker.pickAndStore({},{location: 's3'},function(fpfiles){ 
     console.log(JSON.stringify(fpfiles)); 
    }); 
    }); 
}); 
</script> 
</head> 

<body> 
</div> 
<div id="content"> 
    <div class="row button"> 
    <a href="#" id="big-freaking-button" class="btn btn-danger btn-lg">Filepicker Something</a> 
    </div> 
</div> 
</body> 
</html>

MISE À JOUR:

Ok je réussi à afficher une image ... en utilisant le filepicker et un espace réservé. Maintenant, quelqu'un peut-il me dire comment afficher plusieurs images en tant que gird?

Working Exemple

Source

2016-03-04 MonsterP

$('#big-freaking-button').click(function(){ 

     filepicker.pickAndStore({},{location: 's3'}, 
      function(fpfiles){ 
      console.log(JSON.stringify(fpfiles)); 
     }, 
     function(Blob) { 
      console.log(Blob); 
      console.log(Blob.url); 

      $.ajax("/upload", { 
       type: "POST", 
       data: { 
        product_id: {{{ $product->id }}}, 
        img_path: Blob.url 
       } 
      }); 
     } 
    ) 
};

Vous aurez besoin de stocker l'URL quelque part pour que cela fonctionne, puis dans votre code HTML, vous pouvez effectuer une foreach pour afficher les images:

<?php foreach($product->images as $image){ ?> 
    <img src="{{{ $image->img_path }}}"> 
<?php } ?>

Source

2016-03-07 22:29:49 sjmrt

Merci pour votre réponse! J'ai essayé d'utiliser ce code, mais semble avoir une erreur, il me donne 'Uncaught SyntaxError: Jeton inattendu {' à cette ligne 'product_id: {{{$ product-> id}}},' votre code inclut-il le stockage du URL ou dois-je ajouter cela? – MonsterP

Vous aurez besoin de stocker l'URL quelque part pour que cela fonctionne. – sjmrt

Ok, désolé mais comment stockez-vous l'URL? est-il possible de récupérer le lien URL enregistré dans la console? – MonsterP

Afficher plusieurs images téléchargées avec FilePicker.io

Répondre

Questions connexes