Я знаю, что этот вопрос задавался много раз, но все, что я пытался, не работает.
ЗДЕСЬ ЗДЕСЬ ЗДЕСЬ ЗДЕСЬ Я читал много других постов и статей, ничего не работает.
Итак, я пытаюсь передать переменную либо в JS file или HTML file.
Эта переменная называется "fileNewName", в основном, когда изображение загружается, его имя заменяется на uniqid, поэтому, если два изображения имеют одно и то же имя, одно из них выиграет ' не может быть перезаписано.
Затем мне нужно вернуть это "fileNewName" обратно в HTML, чтобы отобразить его с объектом img. Я хочу избежать изменения файла index. HTML на index. PHP, но я понимаю, что из того, что я прочитал, мне придется сделать это в какой-то момент и, вероятно, использовать Ajax.
Первоначально я хотел сделать следующее: передать переменную из PHP, чтобы установить переменную в JS с ее значением (например: var name = "somehow get the the variable from the PHP file";), а затем использовать img.src = "uploads/" + name;.
I надеюсь, что я четко объяснил свою проблему. Любая помощь или советы будут высоко оценены, спасибо!
Вот различные коды:
index. html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/index.css" >
<link rel = "icon" href="logo.png" type="image/x-icon">
</head>
<body>
<div class="topnav">
<img src="logo.png" style="width:40px;height:40px;"></img>
<a class="active" href="index.html">HOME</a>
<a href="help.html">HELP</a>
<a href="about.html">ABOUT</a>
<a href="examples.html">EXAMPLES</a>
</div>
<div class="dropzone" id="dropzone">
<img src="" id="img" class="img">
<form class="form" id="myForm">
<input type="file" id="inpFile" accept="image/png, image/jpg, image/jpeg" hidden="hidden">
<button type="button" id="custom">CHOOSE AN IMAGE</button>
<button type="submit" class="btn" id="btn">START SORTING</button>
</div>
<script src="drop.js" type="text/javascript"></script>
</body>
</html>
drop. js:
const realBtn = document.getElementById("inpFile");
const customBtn = document.getElementById("custom");
const inpFile = document.getElementById("inpFile");
const myForm = document.getElementById("myForm");
var btn = document.getElementById("btn");
btn.disabled = true;
realBtn.onchange = function(e) {
btn.disabled = false;
}
customBtn.addEventListener("click", function(click) {
inpFile.click();
});
myForm.addEventListener("submit", e => {
e.preventDefault();
const endpoint = "upload.php";
const formData = new FormData();
formData.append("inpFile", inpFile.files[0]);
console.log();
fetch(endpoint, {
method: "post",
body: formData
}).catch(console.error);
document.getElementById("btn").style.display = "none";
document.getElementById("custom").style.display = "none";
document.getElementById("img").style.display = "block";
var img = document.getElementById("img");
var fileName = ???;
img.src = "uploads/";
});
upload. php:
<?php
$uploadOk = 1;
$fileName = $_FILES["inpFile"]["name"];
$fileTmpName = $_FILES["inpFile"]["tmp_name"];
$fileExtsion = explode('.', $fileName);
$fileActualExtension = strtolower(end($fileExtsion));
$fileNewName = uniqid('').'.'.$fileActualExtsion;
$targetPath = "uploads/" . basename($fileNewName);
if ($_FILES["inpFile"]["size"] > 500000000) {
$uploadOk = 0;
}
if ($uploadOk == 1) {
move_uploaded_file($fileTmpName, $targetPath);
}
?>