1
Good morning guys, I’m having a question, I made a scrapbook system and would like to add in the post an image and display it as 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>
<video poster="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 upload the image to my ftp and store it in a folder and display as well.
Your question did not make much sense. Where will this image be in the comments? How exactly do you intend to send it to the server? And how do you want to display it? Will each image be associated with a comment? If so, does this link exist in the database? What does this code do? What should he do?
– Woss
That’s what I want to do partner, I’m beginner, I would like to add an input to photo submission
– Everton Gouveia