Upload files to "/"
This commit is contained in:
parent
b7a2e27764
commit
d76f910f39
|
@ -0,0 +1,19 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Document</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<input type="file" name="zdjecie" id="zdjecie">
|
||||||
|
<button type="submit" id="submitZdj">Wyslij plik</button>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
|
||||||
|
<select id="wybor">
|
||||||
|
<option value=""></option>
|
||||||
|
</select><br>
|
||||||
|
<img src="" alt="" id="img">
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -0,0 +1,44 @@
|
||||||
|
<?php
|
||||||
|
$con = mysqli_connect('localhost', 'root', '', 'zdj2');
|
||||||
|
|
||||||
|
if($_SERVER['REQUEST_METHOD'] == 'POST'){
|
||||||
|
$data = json_decode(file_get_contents('php://input'), true);
|
||||||
|
$img = $data['zdj'];
|
||||||
|
$nazwa = $data['nazwa'];
|
||||||
|
|
||||||
|
$stmt = mysqli_prepare($con, 'INSERT INTO zdj(nazwa, zdj) VALUES (?, ?)');
|
||||||
|
mysqli_stmt_bind_param($stmt, 'ss', $nazwa, $img);
|
||||||
|
|
||||||
|
if(mysqli_stmt_execute($stmt)){
|
||||||
|
echo json_encode(['status'=>'wyslane']);
|
||||||
|
} else {
|
||||||
|
echo json_encode(['status'=>'blad']);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
if($_SERVER['REQUEST_METHOD'] == "GET" && isset($_GET['type'])){
|
||||||
|
$ans = mysqli_query($con, "SELECT * FROM zdj");
|
||||||
|
$json = array();
|
||||||
|
while($row = mysqli_fetch_assoc($ans)){
|
||||||
|
$json[] = $row;
|
||||||
|
}
|
||||||
|
echo json_encode($json);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
if($_SERVER['REQUEST_METHOD'] == 'GET' && isset($_GET["id"])){
|
||||||
|
$ans = mysqli_query($con, "SELECT zdj FROM zdj WHERE id = ". $_GET["id"]);
|
||||||
|
$json = array();
|
||||||
|
if($ans){
|
||||||
|
while($row = mysqli_fetch_assoc($ans)){
|
||||||
|
$json[] = $row;
|
||||||
|
}
|
||||||
|
echo json_encode($json);
|
||||||
|
} else {
|
||||||
|
echo json_encode(["status"=>"nie ma danych"]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
?>
|
|
@ -0,0 +1,60 @@
|
||||||
|
document.addEventListener('DOMContentLoaded', async ()=>{
|
||||||
|
const button = document.getElementById('submitZdj')
|
||||||
|
const selection = document.getElementById("wybor")
|
||||||
|
const img = document.getElementById('img')
|
||||||
|
|
||||||
|
let daneJson = await fetch('php.php?type=all')
|
||||||
|
if(!daneJson.ok){
|
||||||
|
throw new Error("Błąd połączenia")
|
||||||
|
}
|
||||||
|
let dane = await daneJson.json()
|
||||||
|
console.log(dane)
|
||||||
|
dane.forEach(opcja=>{
|
||||||
|
const option = document.createElement("option")
|
||||||
|
option.value = opcja.id
|
||||||
|
option.textContent = opcja.nazwa
|
||||||
|
selection.appendChild(option)
|
||||||
|
})
|
||||||
|
|
||||||
|
async function getBase64(file) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
reader.onload = () => resolve(reader.result);
|
||||||
|
reader.onerror = error => reject(error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
selection.addEventListener('change', async (event)=>{
|
||||||
|
let ansJson = await fetch('php.php?id=' + event.target.value)
|
||||||
|
let ans = await ansJson.json()
|
||||||
|
img.src = ans[0].zdj
|
||||||
|
console.log(ans)
|
||||||
|
})
|
||||||
|
|
||||||
|
button.addEventListener('click', async () =>{
|
||||||
|
const zdjInput = document.getElementById("zdjecie")
|
||||||
|
|
||||||
|
const zdj = zdjInput.files[0]
|
||||||
|
const data = {
|
||||||
|
zdj: await getBase64(zdj),
|
||||||
|
nazwa: zdj.name
|
||||||
|
}
|
||||||
|
console.log(data)
|
||||||
|
|
||||||
|
let fetchans = await fetch('php.php', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify(data)
|
||||||
|
})
|
||||||
|
|
||||||
|
if(!fetchans.ok){
|
||||||
|
throw new Error("Bład połączenia")
|
||||||
|
}
|
||||||
|
let ans = await fetchans.json()
|
||||||
|
console.log(ans)
|
||||||
|
})
|
||||||
|
|
||||||
|
})
|
Loading…
Reference in New Issue