Question

我一直在尝试实现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>

更新：

好的我已经设法使用filepicker和占位符显示一个图像。现在任何人都可以告诉我如何将多个图像显示为网格？

Working Exemple

Answer 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 } ?>

显示使用FilePicker.io

1 个答案: