Показать несколько изображений, загруженных с FilePicker.io

Question

Показать несколько изображений, загруженных с FilePicker.io

Я пытался реализовать API-интерфейс FilePicker.io, чтобы пользователи могли загружать изображения на страницу продукта, и я отчаянно пытался отобразить загруженные файлы (только изображения) на странице. Средство выбора файлов открывается нормально, я могу успешно загрузить изображение и т. Д., Поэтому после загрузки файла я вижу в консоли, что у меня есть объект с некоторой информацией о недавно загруженном файле. Все, что я хочу сейчас, это отобразить изображения, используя $ .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>

ОБНОВИТЬ:

Хорошо, мне удалось отобразить одно изображение … с помощью средства выбора файлов и заполнителя. Теперь кто-нибудь может сказать мне, как отображать несколько изображений в виде скелета?

Рабочий пример

0

ajax filepicker.io php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

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

0