顯示使用FilePicker.io上傳的多個圖像

我一直在試圖實現FilePicker.io API以讓用戶在產品頁面上傳圖像，並一直拼命地嘗試在頁面上顯示上傳的文件（僅限圖像）。 Filepicker可以正常打開，我可以成功上傳圖像等，因此在上傳文件後，我可以在控制檯中看到我有一個包含新上傳文件信息的對象。我現在想要的是顯示圖像，使用$ .ajax POST？這裏是我到目前爲止的代碼：顯示使用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>

UPDATE：

好，我已經設法顯示一個圖像...使用filepicker和佔位符。現在任何人都可以告訴我如何將多個圖像顯示爲網格？

Working Exemple

來源

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 
       } 
      }); 
     } 
    ) 
};

您將需要存儲的URL的地方這個工作，然後在你的HTML可以執行一個foreach來顯示圖像：

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

來源

2016-03-07 22:29:49 sjmrt

謝謝您的回答！我嘗試使用該代碼，但似乎我有一個錯誤，它給了我'未捕獲的SyntaxError：意外的標記{'在此行'product_id：{{{product-> id}}}，'您的代碼是否包含URL還是我必須添加？ – MonsterP

您需要將URL存儲到某個地方纔能使用。 – sjmrt

好的，很抱歉，您如何存儲網址？有什麼方法可以檢索控制檯中記錄的URL鏈接嗎？ – MonsterP

顯示使用FilePicker.io上傳的多個圖像

回答

相關問題