Good morning guys, I'm having a question, I've done a scrapbook and would like to add a picture to the post and display it as the messages are displayed.
My code is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mural de Homenagens - Anjo da Guarda</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="css/example.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script></head><body><videoposter="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" playsinline autoplay muted loop>
<!-- WCAG general accessibility recommendation is that media such as background video play through only once. Loop turned on for the purposes of illustration; if removed, the end of the video will fade in the same way created by pressing the "Pause" button -->
<source src="./videobg.mp4" type="video/mp4">
</video>
<div class="webcodo-top" >
<a href="http://webcodo.com/comments-system-using-php-ajax">
<div class="wcd wcd-tuto"> Afagu</div>
</a>
<a href="http://webcodo.com">
<div class="wcd wcd-logo">Afagu</div>
</a>
<div class="wcd"></div>
</div>
<br/><br/><br/><br/><br/>
<?php
// Connect to the database
include('config.php');
$id_post = "1"; //the post or the page id
?>
<div class="cmt-container" >
<div class="new-com-bt">
<span>Escreva uma homenagem...</span>
</div>
<div class="new-com-cnt">
<input type="text" id="name-com" name="name-com" value="" placeholder="Seu nome" />
<input type="text" id="mail-com" name="mail-com" value="" placeholder="Seu e-mail" />
<textarea class="the-new-com"></textarea>
<div class="bt-add-com">Compartilhar</div>
<div class="bt-cancel-com">Cancelar</div>
</div>
<br/>
<?php
$sql = mysql_query("SELECT * FROM comments WHERE id_post = '$id_post'") or die(mysql_error());;
while($affcom = mysql_fetch_assoc($sql)){
$name = $affcom['name'];
$email = $affcom['email'];
$comment = $affcom['comment'];
$date = $affcom['date'];
// Get gravatar Image
// https://fr.gravatar.com/site/implement/images/php/
$default = "mm";
$size = 35;
$grav_url = "http://www.gravatar.com/avatar/".md5(strtolower(trim($email)))."?d=".$default."&s=".$size;
?>
<div class="cmt-cnt">
<img src="<?php echo $grav_url; ?>" />
<div class="thecom">
<h5><?php echo $name; ?></h5><span data-utime="1371248446" class="com-dt"><?php echo $date; ?></span>
<br/>
<p>
<?php echo $comment; ?>
</p>
</div>
</div><!-- end "cmt-cnt" -->
<?php } ?>
<div class="clear"></div>
</div><!-- end of comments container "cmt-container" -->
<script type="text/javascript">
$(function(){
//alert(event.timeStamp);
$('.new-com-bt').click(function(event){
$(this).hide();
$('.new-com-cnt').show();
$('#name-com').focus();
});
/* when start writing the comment activate the "add" button */
$('.the-new-com').bind('input propertychange', function() {
$(".bt-add-com").css({opacity:0.6});
var checklength = $(this).val().length;
if(checklength){ $(".bt-add-com").css({opacity:1}); }
});
/* on clic on the cancel button */
$('.bt-cancel-com').click(function(){
$('.the-new-com').val('');
$('.new-com-cnt').fadeOut('fast', function(){
$('.new-com-bt').fadeIn('fast');
});
});
// on post comment click
$('.bt-add-com').click(function(){
var theCom = $('.the-new-com');
var theName = $('#name-com');
var theMail = $('#mail-com');
if( !theCom.val()){
alert('Você precisa escrever um comentário!');
}else{
$.ajax({
type: "POST",
url: "ajax/add-comment.php",
data: 'act=add-com&id_post='+<?php echo $id_post; ?>+'&name='+theName.val()+'&email='+theMail.val()+'&comment='+theCom.val(),
success: function(html){
theCom.val('');
theMail.val('');
theName.val('');
$('.new-com-cnt').hide('fast', function(){
$('.new-com-bt').show('fast');
$('.new-com-bt').before(html);
})
}
});
}
});
});
</script>
</body>
</html>
Database:
CREATE TABLE IF NOT EXISTS 'comentarios' (
'id' int(11) NOT NULL AUTO_INCREMENT,
'nome' varchar(40) NOT NULL,
'email' varchar(60) NOT NULL,
'comentario' text NOT NULL,
'id_post' int(11) NOT NULL,
'date' timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY ('id')
);
I would like to send the image to my ftp and store it in a folder and display it as well.