Question

我想在从文件中选择图像后将图像插入数据库之前显示图像，我希望图像显示在页面中。有人能帮我吗？我是php和html的新手并开始学习它。如果你知道会做什么，你可以向我解释。

这是我的PHP代码。

<?php
session_start();

if(isset($_SESSION['username'])){
    include_once('connection.php');
    $username = ucfirst($_SESSION['username']);
    if(isset($_POST['submit'])){
        $title = $_POST['title'];
        $date = $_POST['date'];
        $content = $_POST['content'];
        $file=$_FILES['image']['tmp_name'];
        $image= addslashes(file_get_contents($_FILES['image']['tmp_name']));
        $image_name= addslashes($_FILES['image']['name']);
        move_uploaded_file($_FILES["image"]["tmp_name"],"img/" . $_FILES["image"]["name"]);
        $newsimage="img/" . $_FILES["image"]["name"];

        if(empty($title)){
            echo "Please enter a title";
        }
        else if(empty($date)){
            echo "Please enter a date";
        }
        else if(empty($content)){
            echo "Please enter content";
        }
        else{
        $sql ="INSERT into news (news_title, news_date, news_content, news_image) VALUES ('$title', '$date', '$content', '$newsimage')";
        mysqli_query($con, $sql);
        echo "news entry posted";
        }
    }
}
else{
    header('Location: login.php');
    die();
}

if(isset($_POST['image'])){




}

?>
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>

    <h1>Welcome, <?php echo $_SESSION['username']; ?>!</h1>

    <form method="post" action ="admin.php" enctype="multipart/form-data">
        Title<input type ="text" name ="title" /><br>
        Date<input type ="text" name="date" /><br>
        Content<textarea name="content"></textarea>
        <input type="submit" name="submit" value="Post News Entry" />
        <input class="form-control" id="image" name="image" type="file" onchange='AlertFilesize();'/>
    </form>

</body>
</html>

Answer 1

尝试使用this，就像这样实现您的代码：

   <form method="post" action ="admin.php" enctype="multipart/form-data">
        Title<input type ="text" name ="title" /><br>
        Date<input type ="text" name="date" /><br>
        Content<textarea name="content"></textarea>

        <input class="form-control" id="image" name="image" type="file" onchange='AlertFilesize();'/>
        <img id="blah" src="#" alt="your image" />
<input type="submit" name="submit" value="Post News Entry" />
    </form>

然后添加JS

function readURL(input) {

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#image").change(function(){
    readURL(this);
});

Answer 2

好吧，因为你正在将图像上传到文件夹，这是非常高效的，我试着通过编辑你的代码来为你做的很简单

<强> HTML

<form method="post" action ="admin.php" enctype="multipart/form-data">
        Title<input type ="text" name ="title" /><br>
        Date<input type ="text" name="date" /><br>
        Content<textarea name="content"></textarea>
        <input type="submit" name="submit" value="Post News Entry" />
        <input class="form-control" id="image" name="image" type="file" />
        <input type='hidden' id='picName' name='picName' value=''>//this input is to get the pictures name in client side later you will know why
 </form>
<div id="tmp_upload"></div>//in this div we will show the uploaded image i will let you made some css for it width,height,stuff... by default it will have a display none since nothing is uploaded

这是PHP代码

if(isset($_SESSION['username'])){
    include_once('connection.php');
    $username = ucfirst($_SESSION['username']);
    if(isset($_POST['submit'])){
        $title = $_POST['title'];
        $date = $_POST['date'];
        $content = $_POST['content'];
        $picName = $_POST['picName'];
        if(empty($title)){
            echo "Please enter a title";
        }
        else if(empty($date)){
            echo "Please enter a date";
        }
        else if(empty($content)){
            echo "Please enter content";
        }
        else{
        $sql ="INSERT into news (news_title, news_date, news_content, news_image) VALUES ('$title', '$date', '$content', '$picName')";
        mysqli_query($con, $sql);
        echo "news entry posted";
        }
    }
}
elseif(isset($_FILES['image'])){
    if(move_uploaded_file($_FILES['image']['tmp_name'],"img/" . {$_FILES["image"]["name"]}) == TRUE){
    echo $_FILES['image']['name'].' was uploades succesfully<br/>';
}else{
     echo $_FILES['image']['name'].' could not be uploaded<br/>';
}
}
else{
    header('Location: login.php');
    die();
}

最后JS功能就像这样

我应该使用一些Jquery代码来使它变得更容易，这对你来说并不困难

$(function(){
    $('input#image').change(function(){
        //collect uploaded file info
        var fname = this.files[0].name;
        //start process of uploading
        $('div#upload_tmp').show();
        uploadMe();//the function responsible on upload
        $("input#picName").val(fname);
    });
});
/*implementing function of uploadMe()*/
function uploadMe(){
    //create the myform object
    myForm = new FormData();
    myForm.append('image',document.querySelector('#image').files[0]);
    //generate the xmlHttpRequest 
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4 && xhr.status === 200){
            //if(xhr.responseText === '1'){
                var img_name = document.querySelector('#image').files[0].name;
                var img = "<img src = 'img/"+img_name+"' width='160px' height='160px'>";
                $('div#upload_tmp').html(img);
            //}
        }
    };
    xhr.open('POST' , '//here you put the name of the php script who will manage the upload');
    xhr.send(myForm);
}

希望它可以帮助一点点＆amp;我仍然在这里提出任何问题!!

PHP - 在插入数据库之前显示图像

2 个答案: