Question

我有一个动态表格，我想在一行上显示图像，我也可以将其更改为另一个图像。我已经有了表格代码，我已经可以编辑名称和价格等内容了。

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

目前， BLOB 类型的图像显示表格行中的二进制代码。

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"];
}
}

}}
?>

Answer 1

当您从数据库获取BLOB图像数据时，可以使用以下方法显示图像：

<td class="imagem" data-ref3="'.$row["ref"].'" contenteditable><img src="data:image/jpeg;base64,'.base64_encode( $row['imagem'] ).'"/></td>

如何在Jquery表中显示图像？

1 个答案: