This question already has an answer here:
I have a dynamic table in wich I want to show an image on a row, and I can also change it into another image. I already have the table code and I already can edit stuff like name and the price.
Select3.php:
<?php
$connect = mysqli_connect("localhost", "root", "", "crc");
$output = '';
$sql = "SELECT * FROM pulseiras ORDER BY ref ASC";
$result = mysqli_query($connect, $sql);
$output .= '
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th width="10%">REF</th>
<th width="40%">Nome</th>
<th width="40%">Preco</th>
<th width="40%">Imagem</th>
<th width="10%">Delete</th>
</tr>';
if(mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_array($result))
{
$output .= '
<tr>
<td>'.$row["ref"].'</td>
<td class="nome" data-ref1="'.$row["ref"].'" contenteditable>'.$row["nome"].'</td>
<td class="preco" data-ref2="'.$row["ref"].'" contenteditable>'.$row["preco"].'</td>
<td><form name="inserir" action="insrimg.php" enctype="multipart/form-data" method="post">
<input type="file" name="imagem" id="imagem"></td>
<td><button type="button" name="btn_add" id="btn_add" class="btn btn-xs btn-success">+</button></td>
</form>
</tr>
';
}
$output .= '
<tr>
<td></td>
<td id="nome" contenteditable></td>
<td id="preco" contenteditable></td>
<td id="imagem" contenteditable></td>
<td><button type="button" name="btn_add" id="btn_add" class="btn btn-xs btn-success">+</button></td>
</tr>
';
}
else
{
$output .= '<tr>
<td colspan="4">Data not Found</td>
</tr>';
}
$output .= '</table>
</div>';
echo $output;
?>
At the moment my image of BLOB type show the binary code in the table row.
Index3.php:
<script>
$(document).ready(function(){
function fetch_data()
{
$.ajax({
url:"select3.php",
method:"POST",
success:function(data){
$('#live_data').html(data);
}
});
}
fetch_data();
$(document).on('click', '#btn_add', function(){
var nome = $('#nome').text();
var preco = $('#preco').text();
var imagem = $('#imagem').file();
if(nome == '')
{
alert("Insira Nome");
return false;
}
if(preco == '')
{
alert("Insira Preço");
return false;
}
if(imagem == '')
{
alert("Insira Imagem");
return false;
}
$.ajax({
url:"insrp.php",
method:"POST",
data:{nome:nome, preco:preco, imagem:imagem},
dataType:"text",
success:function(data)
{
alert(data);
fetch_data();
}
})
});
function edit_data(ref, text, column_name)
{
$.ajax({
url:"edit3.php",
method:"POST",
data:{ref:ref, text:text, column_name:column_name},
dataType:"text",
success:function(data){
alert(data);
}
});
}
$(document).on('blur', '.nome', function(){
var ref = $(this).data("ref1");
var nome = $(this).text();
edit_data(ref, nome, "nome");
});
$(document).on('blur', '.preco', function(){
var ref = $(this).data("ref2");
var preco = $(this).text();
edit_data(ref,preco, "preco");
});
$(document).on('blur', '.imagem', function(){
var ref = $(this).data("ref3");
var imagem = $(this).file();
edit_data(ref,imagem, "imagem");
});
$(document).on('click', '.btn_delete', function(){
var ref=$(this).data("ref4");
if(confirm("Tem a certeza que deseja eliminar este dado?"))
{
$.ajax({
url:"delete3.php",
method:"POST",
data:{ref:ref},
dataType:"text",
success:function(data){
alert(data);
fetch_data();
}
});
}
});
});
</script>
insrp.php:
<?php
$imagem= basename($_FILES["imagem"]["name"]);
$connect = mysqli_connect("localhost", "root", "", "crc");
if(count($_FILES) > 0) {
$sql = "INSERT INTO pulseiras(nome, preco, imagem) VALUES('".$_POST["nome"]."', '".$_POST["preco"]."', '".$imagem."')";
if(mysqli_query($connect, $sql))
{
echo 'Data Inserted';
}
$target_dir = "imagens/";
$target_file = $target_dir . basename($_FILES["imagem"]["name"]);
$uploadOk = 1;
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
$check = getimagesize($_FILES["imagem"]["tmp_name"]);
if($check !== false) {
if($check !== false) {
$uploadOk = 1;
} else {
echo "Este ficheiro não é uma imagem!";
$uploadOk = 0;
}
}
// Check if file already exists
if (file_exists($target_file)) {
echo "A imagem já existe.";
$uploadOk = 0;
}
// Allow certain file formats
echo "<br> TIPO: $imageFileType <br>";
echo "<br> TIPO: $imageFileType <br>";
if($imageFileType != "jpg" && $imageFileType != "JPG" && $imageFileType != "png" && $imageFileType != "PNG" && $imageFileType != "bmp" && $imageFileType != "BMP" && $imageFileType != "jpeg" && $imageFileType != "JPEG"
&& $imageFileType != "gif" && $imageFileType != "GIF" ) {
echo "Só é permitido ficheiros do tipo: JPG, PNG, JPEG e GIF";
$uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
echo "O seu ficheiro nao foi enviado!";
// if everything is ok, try to upload file
} else {
if (move_uploaded_file($_FILES["imagem"]["tmp_name"], $target_file)) {
echo "O ficheiro ". basename( $_FILES["imagem"]["name"]). " foi enviado!";
} else {
echo "Houve um erro ao enviar o ficheiro! " . $_FILES["imagem"]["tmp_name"];
}
}
}}
?>
</div>
