我一直在尝试实现 FilePicker.io API，让用户在产品页面上上传图像，我一直在拼命尝试在页面上显示上传的文件（仅图像）。文件选择器打开正常，我可以成功上传图像等，因此上传文件后，我可以在控制台中看到我有一个对象，其中包含有关新上传文件的一些信息。我现在想要的只是使用 $.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>
更新：
好的，我已经设法显示一张图像...使用文件选取器和占位符。现在任何人都可以告诉我如何将多个图像显示为一个腰带吗？
工作示例
$('#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 } ?>