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

标签 javascript php html mysql mamp

我已经这样做了 4 天了。但由于我对编码很陌生,所以建议我先在这里询问,因为我可以节省大量时间来获得经验丰富的编码人员的帮助。有人告诉我这可能需要 20 分钟。这很有帮助,因为我的截止日期是今晚。我还没弄清楚到底发生了什么。

目标允许从 adminpg.html 页面上传图像,以便可以从 adminpg.html 和 userpg.html 页面查看和下载。并将这些图像存储在数据库中(我正在使用 MAMP,但对如何让我的代码正确连接到我的 MAMP 数据库几乎没有经验/了解)

上传.php:http://scratchpad.io/absent-boot-2909

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

userpg.html 代码:(因为我无法再发布链接)

<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>

如果有人能帮我找出哪里出了问题,我将永远感激不已。

谢谢大家。

最佳答案

我会告诉你我有什么。这是一个工作代码,您的图像将上传到我的 php 项目目录中名为“upload”的文件夹中,链接将添加到数据库中,然后,我向用户显示该链接,以便他们可以下载任何类型文件,不仅仅是图像,如果这是您想要的,这是我的代码: 这是在 PHP-PDO 中:当我的提交按钮被点击时,我的文件的名称以及保存位置的链接是从 HTML 表单中获取的,然后如果上传到文件夹成功,它将被添加到数据库。

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']);
    }
}
?>

然后下载: 将此代码保存到新的 PHP 文件中,我将其命名为 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);
?>

这是我的 HTML 代码,其中显示下载文件的链接:

<?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> 

如果您发现使用 JavaScript 执行此操作有困难,我希望这对您有所帮助。

关于javascript - 通过数据库创建图像上传/下载功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34554555/

相关文章:

javascript - 检查整个 div 是否对用户可见

javascript - 使用 XMLHttpRequest() 时未定义的 _POST 变量

php - IN array in where 子句 mysql php pdo

javascript - 为什么列表元素无法使用显示初始正确显示

javascript - 没有为 React 按钮设置背景图像

javascript - 追加的当前元素

javascript - Angular 和 UIGrid - 获取表数据

php - Auth guard [admin] 未定义

php - 带有 php :7. 1-fpm 的 Docker 镜像的 GD 库

css - 如何在另一个 div 中居中放置 2 个 float div