Сообщение от finlolo
|
У меня цикл перебирает все формы с такими картинками, если быть точным то цикл for. Trable в том, что он переходит на следующий шаг не дожидаясь окончания текущей итерации, в итоге пока добавляется файл происходит киш-миш.
|
Используйте async/await
<form id="form_0">
<img id="list_0" src="https://picsum.photos/800/800">
</form>
<form id="form_1">
<img id="list_1" src="https://picsum.photos/400/400">
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"></script>
<script>
const airforms = document.querySelectorAll("form");
const urls = [];
(async () => {
for(const airform of airforms) {
const id = airform.id.replace("form_", "");
const blob = await domtoimage.toBlob(document.getElementById("list_" + id));
const formData = new FormData();
formData.append("file", blob);
const endPoint = "http://0.0.0.0:8080/image-upload.php";
// отправляю файл
const response = await fetch(endPoint, {
method: "POST",
body: formData
});
const result = await response.json();
//записываю данные с формы в массив объектов
//передаю массиву ссылку на файл
if("path" in result)
urls.push(new URL(result.path, endPoint));
}
// выводится массив с ссылками на уже загруженные файлы, после того как всё загрузилось
console.log(urls);
})();
</script>
Файлы отправляются POST запросом в
http://0.0.0.0:8080/image-upload.php
Файл загружается в папку upload
Сообщение от finlolo
|
посоветуйте, как обработать данную строку на php.
|
Сообщение от finlolo
|
чтобы сохранить на сервере.
|
Может тогда всё-таки сохранять в виде файла...
Файл image-upload.php
<?php
define('KB', 1000);
define('MB', 1000 * KB);
define('GB', 1000 * MB);
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: Content-Type');
$target_dir = "uploads/";
$imageFileType = $_FILES["file"]["type"];
$file_name = sha1_file($_FILES["file"]["tmp_name"]);
$extension = explode('/', $imageFileType)[1];
$target_file = $target_dir . 'image-' . $file_name . '.' . $extension;
$result['ok'] = true;
// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
$check = getimagesize($_FILES["file"]["tmp_name"]);
if($check !== false) {
$result['message'][] = "File is an image - " . $check["mime"] . ".";
$result['ok'] = true;
} else {
$result['message'][] = "File is not an image.";
$result['ok'] = false;
}
}
// Check if file already exists
if (file_exists($target_file)) {
$result['message'][] = "Sorry, file already exists.";
$result['ok'] = false;
$result['path'] = $target_file;
}
// Check file size
if ($_FILES["file"]["size"] > 5 * MB) {
$result['message'][] = "Sorry, your file is too large.";
$result['ok'] = false;
}
// Allow certain file formats
if($extension != "jpg" && $extension != "png" && $extension != "jpeg"
&& $extension != "gif" ) {
$result['message'][] = "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
$result['ok'] = false;
}
// Check if $result['ok'] is set to false by an error
if ($result['ok'] == false) {
$result['message'][] = "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
if (move_uploaded_file($_FILES["file"]["tmp_name"], $target_file)) {
$result['message'][] = "The file ". basename( $_FILES["file"]["name"]). " has been uploaded.";
$result['path'] = $target_file;
} else {
$result['message'][] = "Sorry, there was an error uploading your file.";
$result['ok'] = false;
}
}
echo json_encode($result);