通过数据库为图像创建上传/下载功能

I've been at this for 4 days now. But since I'm so new to coding I was suggested to ask here first as I'd save a lot of time getting help from experienced coders. Someone has told me this can take 20 minutes. Which is helpful because my deadline is tonight. And I've yet to figure out what on earth is going on.

GOAL to allow an image to be uploaded from the adminpg.html page, to be viewable and downloadable from both the adminpg.html AND userpg.html pages. And for these images to be stored in a database (i am using MAMP but have little to no experience / understanding on how to get my code to connect to my MAMP database properly)

upload.php: http://scratchpad.io/absent-boot-2909

adminpg.html: http://scratchpad.io/hesitant-visitor-5291

userpg.html code: (since i cant post anymore links)

<head>
    <meta charset="utf-8">
    <title>-=The Portfolio Website=-</title>
     <link rel="stylesheet" type="text/css" href="../css/stylesheet.css">
            </head>
    <body>
        <header id = "MainHeader">
               <h1>Viewing / Download page</h1>

            <nav>

            <ul>
                <li>
                    <a href="../index.html">Home</a>
                </li>
                <li>
                    <a href="pages/about.html">About Me</a>
                </li>
                <li>
                    <a href="pages/contact.html">Contact</a>
                </li>
                </ul>
            </nav>
            </header>
        <main>


            <button type="button" style = "position:absolute; top:400px; left:50%; transform:translate(-50%); transform:scale(3,3);">Download Entire Folio</button>

            <div>   <img src="../images/SC.jpg" alt="Cover Image"> 
            <p>
                This page is where you can access all the softcopy files of my folio.</p>
        </main>
        <footer>
            <ul>
            <li>
                <a href="http://www.instagram.com">INSTAGRAM</a>
                </li>
                <li>
                <a href="http://www.facebook.com">FACEBOOK</a>
                </li>
                <li>
                <a href="mailto:someone@yoursite.com">EMAIL</a>
                </li>
            </ul>
            <p>&copy; 2015 Designed by Julian</p>
        </footer>
    </body>

If anyone can help me figure out where I'm going wrong here, I would be eternally grateful.

Thank you everyone.

I will show you what I have. This is a working code, where your image will be uploaded into a folder called 'upload' in my php project directory, and the link will be added to the database, and then, I show the link to user so they can download any type of files, not only images, if this is what you want, here is my codes: This is in PHP-PDO: When my submit button is clicked, the name of my file, with the link to where it is saved, are taken from HTML form, then if the upload to the folder is successful, it will be added to database.

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
if(isset($_POST['submit_map'])){
    $name = isset($_POST['name_of_map']) ? $_POST['name_of_map'] : '';
        $message='';
        $path = "../uploads/".$_FILES['file']['name'];
        try{




                $ext = pathinfo($path, PATHINFO_EXTENSION);
                if(move_uploaded_file($_FILES["file"]["tmp_name"], $path)){
                    //$path = "./uploads/".$path;
                    $sql = "INSERT INTO maps(name_of_map, projects_id, map) VALUES (:name, :id, :file)";
                    $stmt = $conn->prepare($sql);
                    $stmt->bindValue(":name", $name);
                    $stmt->bindValue(":id", $id);
                    $stmt->bindValue(":file", $path);
                    $count = $stmt->execute();
                    //var_dump($_FILES);
                    //die();
                    header("location: maps.php?id=".$id);
            }
        }
        catch(PDOException $e) {
            echo $e->getMessage();
            var_dump($_FILES);          
            header("location: insert_map_false.php?id=".$id);

        }
                    unset($_POST['submit_map']);
    }
}
?>

Then for downloading: Save this code into new PHP file, I called it download_PopUp.php

<?php
$data = $_REQUEST['data'];
header('Content-Type: application/octet-stream');
header("Content-Transfer-Encoding: Binary"); 
//header("Content-disposition: attachment; filename=\"" . basename($data) . "\"");
header("Content-disposition: attachment; filename=\"" . basename($data) . "\"");
readfile($data);
?>

And here is my HTML code where I show links to download files:

<?php
$sql_map = "SELECT * FROM maps WHERE projects_id = :id_m";
$stmt_map = $conn->prepare($sql_map);
$stmt_map->bindValue(":id_m", $id);
$count_m = $stmt_map->execute();
$result = $stmt_map->fetchAll();
?>
<form action="" name="show_maps" method="post" enctype="multipart/form-data">
<table border="1" cellpadding="2" cellspacing="1" align="center" dir="rtl">
<th bgcolor="#666666" align="center">
الخريطة
</th>
<td>
<?php foreach ($result as $map) { 
    $data = $map['map'];
    $dataFile = str_replace('/', '\\', $data);
?>
<tr align="center">
<td>
    <?php if($map['name_of_map']==''): ?>
   <a href='download_PopUp.php?data=<?php echo $dataFile; ?>'><?php echo $dataFile?></a>
   <?php else: ?>
   <a href='download_PopUp.php?data=<?php echo $dataFile; ?>'><?php echo $map['name_of_map']?></a>
   <?php endif; ?>
<?php } ?>
</td>
</tr>
</tr>
</table>
</form> 

I hope that this helped you, if you find a difficulty to do it with JavaScript.