显示使用 FilePicker.io 上传的多个图像答案

【问题标题】：Display Multiple images uploaded with FilePicker.io显示使用 FilePicker.io 上传的多个图像
【发布时间】：2016-03-04 23:49:57
【问题描述】：

我一直在尝试实现 FilePicker.io API 以让用户在产品页面上上传图片，并且我一直在拼命尝试在页面上显示上传的文件（仅限图片）。 Filepicker 可以正常打开，我可以成功上传图像等，所以在上传文件后，我可以在控制台中看到我有一个对象，其中包含有关新上传文件的一些信息。我现在想要的只是显示图像，使用 $.ajax POST 吗？这是我到目前为止的代码：

<!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>

更新：

好的，我已经设法显示一个图像...使用文件选择器和占位符。现在谁能告诉我如何将多个图像显示为一个网格？

Working Exemple

【问题讨论】：

标签： php ajax filepicker.io

【解决方案1】：

    $('#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 } ?>

【讨论】：

感谢您的回答！我尝试使用该代码，但似乎我有一个错误，它给了我 'Uncaught SyntaxError: Unexpected token {' at this line 'product_id: {{{ $product->id }}}'，你的代码是否包括存储网址还是我必须添加它？
您需要将 URL 存储在某个地方才能使用。
好的，抱歉，您如何存储 URL？有什么方法可以检索控制台中记录的 URL 链接？