Question

以下是该网站如何给您一个想法。

我想在点击 Bestand kiezen （=转换为选择文件）后立即显示他输入的图像。它现在的工作原理是它只显示文件名，如何立即显示图像的预览？单击添加发布按钮后，图像和其他信息仅插入数据库中。

这应该用 ajax 完成吗？

addpost.php代码

<?php
include_once('classes/Post.class.php');
include_once('classes/User.class.php');

User::checklogin();
$post = Post::ShowPosts();

if(! empty($_POST)) {

    $file = $_FILES['file'];
    $fileName = $_FILES['file']['name'];
    $fileTmpName = $_FILES['file']['tmp_name'];
    $fileSize = $_FILES['file']['size'];
    $fileError = $_FILES['file']['error'];
    $fileType = $_FILES['file']['type'];
    $fileExt = explode('.', $fileName);
    $fileActualExt = strtolower(end($fileExt));

    $allowed = array('jpg', 'jpeg', 'png');

    if (in_array($fileActualExt, $allowed)){
        if ($fileError === 0){
            if ($fileSize < 10000000){
                $fileNameNew = uniqid('', true).".".$fileActualExt;
                $fileDestination = 'uploads/'.$fileNameNew;
                print_r($fileDestination);
                move_uploaded_file($fileTmpName, $fileDestination);
                $feedback = "Post has been saved.";
                $title = $_POST['title'];
                $desc = $_POST['description'];
                $filter = $_POST['filter'];
                $date = date("Y-m-d H:i:s");
                $location = "";
                $userid = $_SESSION['userid'];
                $newPost = new Post();

                $newPost->setTitle($title);
                $newPost->setPicture($fileDestination);
                $newPost->setDescription($desc);
                $newPost->setDate($date);
                $newPost->setUserId($userid);
                $newPost->setLocation($location);
                $newPost->setFilter($filter);
                $newPost->AddPost();
                $postId = Post::getLastId();


                $string = $_POST['tag'];
                $tags = explode(',' , $string);

                foreach($tags as $t) {
                    $newPost->setTag($t);
                    $newPost->AddTags($postId);
                }

            } else{
                $feedback = "Your file is too big.";
            }
        } else{
            $feedback = "There was an error uploading your file.";
        }
    } else{
        $feedback = "You cannot upload files of this type.";
    }



}
?><!DOCTYPE html>
<html lang="en">

<body>


<form action="" method="post" enctype="multipart/form-data">

    <h1 form__title>Add post</h1>
    <?php  if(isset($feedback)): ?>
        <div class="feedback">
            <p><?php echo $feedback; ?></p>
        </div>
    <?php endif; ?>
    <div class="form__field">
        <label for="title" class="label">YOUR SHOT TITLE:</label> <br/>
        <input class="form__input" type="text" name="title">
    </div>
    <div class="form__field">
        <label for="file" class="label">UPLOAD PICTURE</label><br/>
        <input class="form__input" type="file" name="file" class="fileToUpload">
    </div>
    <div class="form__field">
        <label for="description" class="label">DESCRIPTION</label><br/>
        <textarea name="description" cols="25" rows="5"></textarea>
    </div>

    <div class="form__field">
        <label for="tag" class="label">ADD SOME TAGS TO YOUR SHOT (seperated with , )</label><br/>
        <input class="form__input" type="text" name="tag">
    </div>

    <p>JPG, GIF or PNG. Snapshots are 400 × 300 pixels or 800 × 600 (for HiDPI displays). </p><br/><br/>

    <div class="form__field">
        <label for="tag" class="label">ADD ONE (Instagram) FILTER TO YOUR SHOT </label><br/>

        <select name="filter">
            <option value="_1977">1977</option>
            <option value="aden">aden</option>
            <option value="xpro2">xpro2</option>
        </select>
    </div>

    <div class="form__field">
        <input class="btn_style" type="submit" name="submit" value="Add post"">
    </div>
</form>


</body>
</html>

Addpost功能

public function AddPost(){

        $conn = db::getInstance();
        $query = "insert into posts (post_title, picture, description, filter, location, user_id, post_date) values (:post_title, :picture, :description, :filter, :location,  :user_id, :post_date)";
        $statement = $conn->prepare($query);
        $statement->bindValue(':post_title',$this->getTitle());
        $statement->bindValue(':picture',$this->getPicture());
        $statement->bindValue(':description',$this->getDescription());
        $statement->bindValue(':filter', $this->getFilter());
        $statement->bindValue(':location',$this->getLocation());
        $statement->bindValue(':user_id',$this->getUserId());
        $statement->bindValue(':post_date',$this->getDate());
        $statement->execute();
        $result = $statement->fetchAll(PDO::FETCH_ASSOC);
        return $result;
    }

Answer 1

HTML - Display image after selecting filename

使用javascript片段向下看第一个答案，很好地回答了这个问题

PHP - 如何在同一页面上立即显示上传的图像？

1 个答案: