PHP - Bild vor dem Einfügen in die Datenbank anzeigen

Ich möchte das Bild vor dem Einfügen in die Datenbank nach der Auswahl eines Bildes aus der Datei zeigen, ich möchte das Bild auf der Seite angezeigt werden. Kann mir jemand helfen? Ich bin neu in PHP und HTML und starte es zu lernen. Und wenn du weißt, was du tun wirst, kannst du es mir erklären.PHP - Bild vor dem Einfügen in die Datenbank anzeigen

Hier ist mein PHP-Code.

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

Quelle

2016-06-28 nethken

Was genau bekommen Sie in '$ newsimage'? – C2486

@Rishi ein Bild, Sir. – nethken

@nethken was Sie in der DB ein BLOB oder nur die URL einfügen und speichern Sie die img in einem Ordner – PacMan

this Versuchen Sie, auf Ihren Code Umsetzung wie folgt aus:

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

Dann JS hinzufügen

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); 
});

Quelle

2016-06-28 02:50:09 arisalsaila

sollte ich das hinzufügen? Es funktioniert nicht Kein Bild zeigt ... – nethken

Sieh dir dieses Beispiel an [link] (http://jsfiddle.net/LvsYc/) – arisalsaila

immer noch nicht arbeiten :( – nethken

gut, da Sie Bilder hochladen, in Ordner, die sehr performant ist, ich versucht, gemacht, wie ziemlich einfach für Sie, indem Sie Ihren Code hier bearbeiten, ist es

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

hier ist der PHP-Code

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(); 
}

und schließlich würde die JS-Funktion wie diese

sein ich soll habe einige jQuery-Code verwenden, es ist viel einfacher und es ist nicht etwas schwer für Sie

$(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); 
}

hoffe es kann ein wenig helfen & ich bin immer noch hier für jede frage !!

Quelle

2016-06-28 03:42:39 PacMan

PHP - Bild vor dem Einfügen in die Datenbank anzeigen

Antwort

Verwandte Themen