Sending picture/image to server (PHP, Ajax and Mysql)

Kirasiris · October 19, 2016

Hello I've been trying to fix this problem for around 3 weeks; so what I want is to be able to send a picture and being able to display it in another page. It send it to the server, but still it doesn't show it.

Here is my code:

<?php require_once('../Connections/connection.php'); ?>
<?php
$editFormAction = $_SERVER['PHP_SELF'];
if (isset($_SERVER['QUERY_STRING'])) {
$editFormAction .= "?" . htmlentities($_SERVER['QUERY_STRING']);
}

if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "add_post")) {
$tiempocotejo= time();
$insertSQL = sprintf("INSERT INTO posts (titulo, categoria, tag, imagen, contenido, descripcion, estatus, plantilla,link, price, autor) VALUES (%s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s)",
GetSQLValueString($_POST['titulo'], "text"),
GetSQLValueString($_POST['categoria'], "text"),
GetSQLValueString($_POST['tag'], "text"),
GetSQLValueString($_POST['imagen'], "text"),
GetSQLValueString($_POST['contenido'], "text"),
GetSQLValueString($_POST['descripcion'], "text"),
GetSQLValueString($_POST['estatus'], "int"),
GetSQLValueString($_POST['plantilla'], "int"),
GetSQLValueString($_POST['link'], "text"),
GetSQLValueString($_POST['price'], "text"),
GetSQLValueString($_SESSION['MM_Id'], "int"));

mysql_select_db($database_connection, $connection);
$Result1 = mysql_query($insertSQL, $connection) or die(mysql_error());

mysql_select_db($database_connection, $connection);
$query_SacarIdPost = sprintf("SELECT posts.id FROM posts WHERE time=%s",$tiempocotejo,"int");
$SacarIdPost = mysql_query($query_SacarIdPost, $connection) or die(mysql_error());
$row_SacarIdPost = mysql_fetch_assoc($SacarIdPost);
$totalRows_SacarIdPost = mysql_num_rows($SacarIdPost);

mysql_free_result($SacarIdPost);


$updateSQL = sprintf("UPDATE posts SET urlamigable= %s WHERE id=%s",
GetSQLValueString(limpia_espacios($_POST['titulo'],$row_SacarIdPost['id']), "text"),
GetSQLValueString($row_SacarIdPost['id'], "int"));

mysql_select_db($database_connection, $connection);
$Result1 = mysql_query($updateSQL, $connection) or die(mysql_error());







$insertGoTo = "publishedpost" . UrlAmigablesInvertida($row_SacarIdPost['id']).".php";
header(sprintf("Location: %s", $insertGoTo));


}


?>
<style>
#select{
padding-left:0px;	
}
#select2{
padding-right:0px;

}
</style>

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

<?php include("includes/head.php"); ?>
<!-- Preloader -->
<div id="preloader">
<div id="status"> </div>
</div>

<body>

<div id="sb-site">
<!-- header-full -->
<div class="boxed">
<?php include ("../includes/header.php");?>

<?php include("../includes/menu.php");?>
</div>
<!-- header-full -->



<header class="main-header" style="background-color:#f1f1f1;"></header>
<!-- container -->
<div class="container">
<div class="row">
<!-- Sidebard menu -->
<?php include ("../includes/adminsidebar.php"); ?>
<!-- Sidebar menu -->


<!--Container -->
<div class="col-md-9">
<form role="form" action="<?php echo $editFormAction; ?>" name="add_post" method="POST">
<!-- Title -->
<div class="form-group">
<label>Title</label>
<input type="text" class="form-control" name="titulo" placeholder="Enter title">
</div>



<!-- Title -->

<!-- upload image -->
<div class="form-group">
<input class='file' type="file" class="form-control" name="imagen" onClick="gestionimagen.php" id="images" placeholder="Please choose your image">
</div>



<!-- Upload Image -->


<div class="form-group">
<label> Description </label><br>
<textarea class="" name="descripcion" style="width:100%"></textarea>
</div>




<!-- Text editors -->
<div class="form-group">
<label> Contenido </label>
<textarea class="ckeditor" name="contenido"></textarea>
</div>
<!-- Text editor -->

<!-- Category -->

<div class="form-group">
<label>Categoria</label>
<input type="text" class="form-control" name="categoria" placeholder="Enter categoria">
</div>


<div class="form-group">
<label>Tag</label>
<input type="text" class="form-control" name="tag" placeholder="Enter tag">
</div>


<!-- Category -->


<!-- Visibilidad -->
<div class="col-md-6" id="select">
<div class="form-group">
<label for="select">Visible</label>
<select class="form-control" id="estatus" name="estatus">
<option value="1">Si</option>
<option value="0">No</option>
</select>
</div>
</div>
<!-- Visibilidad -->

<!-- Tiplo de Plantilla necesito trabajar en esto!!!!! pero ya!!!-->
<script>
function plantilla(){

var formData = new FormData($("#formUpload")[0]);
$.ajax({
type: 'POST',
url: 'plantillapost.php',
data: formData,
contentType: false,
processData: false
});

}
</script>
<div class="col-md-6" id="select2">
<div class="form-group">
<label for="select">Plantilla</label>
<select class="form-control" id="plantilla" name="plantilla">
<option value="1" <?php if (!(strcmp(1, ""))) {echo "SELECTED";} ?>>Normal</option>
<option value="2" onClick="plantilla" <?php if (!(strcmp(2, ""))) {echo "SELECTED";} ?>>Full-Width</option>
</select>
</div>
</div>
<!-- Tipo de Plantilla -->

<div class="col-md-6" id="select">
<div class="form-group">
<label>Link</label>
<input type="text" class="form-control" name="link" placeholder="Enter link">
</div>
</div>

<div class="col-md-6" id="select2">
<div class="form-group">
<label>Price</label>
<input type="text" class="form-control" name="price" placeholder="Enter price">
</div>
</div>

<button type="submit" class="btn btn-ar btn-primary pull-right">Agregar</button>
<input type="hidden" name="MM_insert" value="add_post">

</form>




</div>
<!-- Container -->



</div>
</div>
<!-- container -->

<?php include("../includes/footer.php");?>

</div> <!-- boxed -->
</div> <!-- sb-site -->

<?php include("../includes/menuderecha.php");?>
<!-- sb-slidebar sb-right -->
<?php include("../includes/back-to-top.php");?>


<!-- Scripts -->
<!-- Compiled in vendors.js -->
<!--
<script src="js/jquery.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-switch.min.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/slidebars.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<script src="js/holder.js"></script>
<script src="js/buttons.js"></script>
<script src="js/jquery.mixitup.min.js"></script>
<script src="js/circles.min.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/jquery.matchHeight-min.js"></script>
-->

<script src="<?php echo $urlWeb ?>js/vendors.js"></script>

<!--<script type="text/javascript" src="js/jquery.themepunch.tools.min.js?rev=5.0"></script>
<script type="text/javascript" src="js/jquery.themepunch.revolution.min.js?rev=5.0"></script>-->


<!-- Syntaxhighlighter -->
<script src="<?php echo $urlWeb ?>js/syntaxhighlighter/shCore.js"></script>
<script src="<?php echo $urlWeb ?>js/syntaxhighlighter/shBrushXml.js"></script>
<script src="<?php echo $urlWeb ?>js/syntaxhighlighter/shBrushJScript.js"></script>

<script src="<?php echo $urlWeb ?>js/DropdownHover.js"></script>
<script src="<?php echo $urlWeb ?>js/app.js"></script>
<script src="<?php echo $urlWeb ?>js/holder.js"></script>
<script src="<?php echo $urlWeb ?>js/home_profile.js"></script>
<script src="<?php echo $urlWeb ?>js/efectos.js"></script>



</body>

</html>

But Im still not able to display it, si I tried to do a tutorial that I saw on Internet and it made do another php file, that why I put on the input an action="gestionimagen.php" otherwise I would have never done, here is my code for gestionimagen.php:

NOTE: I had to create another table on my server called images, but I would like to be able to do it in my table called posts as I have in the code above.

<?php
require_once '../Connections/connection.php';
$data = array();
if( isset( $_POST['image_upload'] ) && !empty( $_FILES['imagen'] )){

	$image = $_FILES['imagen'];
	$allowedExts = array("gif", "jpeg", "jpg", "png");

	if (!empty($_SERVER['HTTP_CLIENT_IP'])) {
		$ip = $_SERVER['HTTP_CLIENT_IP'];
	} elseif (!empty($_SERVER['HTTP_X_FORWARDED_FOR'])) {
		$ip = $_SERVER['HTTP_X_FORWARDED_FOR'];
	} else {
		$ip = $_SERVER['REMOTE_ADDR'];
	}

	//create directory if not exists
	if (!file_exists('imagen')) {
		mkdir('imagen', 0777, true);
	}
	$image_name = $image['name'];
	//get image extension
	$ext = strtolower(pathinfo($image_name, PATHINFO_EXTENSION));
	//assign unique name to image
	$name = time().'.'.$ext;
	//$name = $image_name;
	//image size calcuation in KB
	$image_size = $image["size"] / 1024;
	$image_flag = true;
	//max image size
	$max_size = 512;
	if( in_array($ext, $allowedExts) && $image_size < $max_size ){
		$image_flag = true;
	} else {
		$image_flag = false;
		$data['error'] = 'Maybe '.$image_name. ' exceeds max '.$max_size.' KB size or incorrect file extension';
	} 

	if( $image["error"] > 0 ){
		$image_flag = false;
		$data['error'] = '';
		$data['error'].= '<br/> '.$image_name.' Image contains error - Error Code : '.$image["error"];
	}

	if($image_flag){
		move_uploaded_file($image["tmp_name"], "../images/post".$name);
		$src = "../images/post".$name;
		$dist = "../images/post/thumbnail_".$name;
		$data['success'] = $thumbnail = 'thumbnail_'.$name;
		thumbnail($src, $dist, 200);
		$sql="INSERT INTO images (`id`, `original_image`, `thumbnail_image`, `ip_address`) VALUES (NULL, '$name', '$thumbnail', '$ip');";
		if (!mysqli_query($con,$sql)) {
			die('Error: ' . mysqli_error($con));
		} 

	}

	mysqli_close($con);
	echo json_encode($data);

} else {
	$data[] = 'No Image Selected..';
}
?>

So I don't know if did properly explain myself, but thats what I want, send the picture to my server into my table called posts, otherwise can you help me how to properly adapt it to the new table called "images" .

Sign In

Sending picture/image to server (PHP, Ajax and Mysql)

Recommended Posts

Kirasiris

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information