Stack Overflow на русском Asked by Vovvka on January 30, 2021
Есть код, делающий превью и возможность удаления загруженных фотографий пользователями перед отправкой на сервер. В JS не разбираюсь, взял готовый пример вот отсюда: https://codd-wd.ru/sozdanie-prevyu-izobrazhenij-s-pomoshhyu-html5-file-api-i-jquery/
Вопрос 1. Не могу правильно соединить получаемые данные чтобы в одной форме вместе с текстом отправлялись названия фото в массиве. Текст из формы отправляется где login
и description
, а вот название фотографий загруженных нет, массив с фото приходит пустой.
Вопрос 2. Как корректно изменить названия всех загруженных фотографий на уникальные, чтобы на сервере не было повторов фото? Это же делается через цикл, я правильно понимаю??
HTML форма.
<form action="/S.php" method="POST">
<strong>Ваш логин</strong>
<input type="text" name="login" value="<?php echo @$data['login']; ?>"><br>
<input type="text" name="description" value="<?php echo @$data['description']; ?>"><br>
<input type="file" id="addImages" multiple="">
<input type="hidden" name="azaza" value="zazaza">
<ul id="uploadImagesList">
<li class="item template">
<span class="img-wrap">
<img src="image.jpg" alt="">
</span>
<span class="delete-link" title="Удалить">Удалить</span>
</li>
</ul>
<div class="clear"></div>
<div>
<input type="submit" value="Отправить">
</div>
JS код.
<script>
jQuery(document).ready(function ($) {
var maxFileSize = 2 * 1024 * 1024; // (байт) Максимальный размер файла (2мб)
var queue = {};
var form = $('form#uploadImages');
var imagesList = $('#uploadImagesList');
var itemPreviewTemplate = imagesList.find('.item.template').clone();
itemPreviewTemplate.removeClass('template');
imagesList.find('.item.template').remove();
$('#addImages').on('change', function () {
var files = this.files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
if ( !file.type.match(/image/(jpeg|jpg|png|gif)/) ) {
alert( 'Фотография должна быть в формате jpg, png или gif' );
continue;
}
if ( file.size > maxFileSize ) {
alert( 'Размер фотографии не должен превышать 2 Мб' );
continue;
}
preview(files[i]);
}
this.value = '';
});
// Создание превью
function preview(file) {
var reader = new FileReader();
reader.addEventListener('load', function(event) {
var img = document.createElement('img');
var itemPreview = itemPreviewTemplate.clone();
itemPreview.find('.img-wrap img').attr('src', event.target.result);
itemPreview.data('id', file.name);
imagesList.append(itemPreview);
queue[file.name] = file;
});
reader.readAsDataURL(file);
}
// Удаление фотографий
imagesList.on('click', '.delete-link', function () {
var item = $(this).closest('.item'),
id = item.data('id');
delete queue[id];
item.remove();
});
// Отправка формы
form.on('submit', function(event) {
var formData = new FormData(this);
for (var id in queue) {
formData.append('images[]', queue[id]);
}
$.ajax({
url: $(this).attr('action'),
type: 'POST',
data: formData,
async: true,
success: function (res) {
alert(res)
},
cache: false,
contentType: false,
processData: false
});
return false;
});
});
</script>
В PHP ловлю отправленные данные через print_r()
$data = $_POST;
$photo = $_FILE;
//Выводим
if (isset($data['submit']) ) {
echo'<pre>';
print_r($photo);
echo'</pre>';
echo'<pre>';
print_r($data);
echo'</pre>';
}
else {
exit();
}
Не могу соединить все воедино, какая-то каша, помогите, коллеги.
Для того что бы этот код у Вас работал, нужно:
enctype="multipart/form-data"
и id="uploadImages"
2.1) $photo = $_FILE;
заменить на $photo = $_FILES;
2.2) if (isset($data['submit']) ) {
также заменить на что-то такое if (sizeof($photo)) {
И наконец Вы увидите массивы заполненными в alert
, согласно кода Вашего js (главное не превысить максимальный размер загружаемых на сервер файлов, директивы upload_max_filesize
и post_max_size
в php.ini
или же настройках Вашего веб-сервера)
Answered by noname2019 on January 30, 2021
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP