Upload files to "/"

2024-10-15 13:01:00 +00:00 · 2024-10-15 13:01:00 +00:00 · d76f910f39
parent b7a2e27764
commit d76f910f39
3 changed files with 123 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -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>
--- a/php.php
+++ b/php.php
@ -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"]);
+        }
+    }
+
+?>
--- a/script.js
+++ b/script.js
@ -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)
+    })
+
+})