使用ajax post将图像从本地商店发送到mysql

Posted 2023-02-19

【中文标题】使用ajax post将图像从本地商店发送到mysql

【英文标题】：Send image from localstore to mysql with ajax post

【发布时间】：2014-06-04 12:02:42

【问题描述】：

我正在尝试使用 javascript 发送存储在 localstore 中的图片，但无法检索并显示它。

Javascript 部分：

liste['pic'] = localStorage['pic'];

            $.ajax(
                type: "POST",  
                url: "save.php",  
                data:  pic : liste['pic'] ,
                dataType: "json", 
                success: function(data) 
                    if(data) 
                        alert("Picture sent succesfully");
                    
                  
                );

接收数据的php部分：

require "lib/connect.php";
$pic = $_POST['pic'];
$insert_query = "INSERT INTO liste ( `pic` ) VALUES ( '".$pic."' );";
$result = mysql_query($insert_query);

显示图片的 php 部分。 表中有东西，但由于它是 blob ，我无法检查数据是否正确。

$select_query = "Select   `pic` From liste;";
$result = $dbhandle->query($select_query);

echo "<table border='1'>
<tr>
<th>Image</th>
</tr>";

while($row = mysqli_fetch_array($result))
  
  echo "<tr>";
  echo "<td><img src=\"" . $row['pic'] . "\" width=\"200\"/><br/><br/></td>";
  echo "</tr>";
  
echo "</table>";
$result->closeCursor();
mysqli_close($dbhandle);

从这里我得到一个损坏的图像。缺什么 ？文字有效，但图片无效，为什么？

【问题讨论】：

可能图像数据已损坏？您是否尝试过在发送 ajax 请求之前执行 base64_encode？从 db 检索数据时，您需要执行 base64_decode ...

您应该记录变量的每一步以查看它丢失的位置。在 ajax 之前的脚本中使用 console.log。 firephp，或 php 部分中的 file_put_contents，在 html 中，您只需查看页面源代码即可查看它在 img 标记中插入的内容。这至少应该让您知道问题出在哪里。

localStorage['pic'] 是图片路径还是图片blob数据路径？

【参考方案1】：

您需要知道的是，当您通过POST 发送以json 编码的值时，这些值不会出现在$_POST 变量中。

在 POST 变量中获取值的唯一方法是使用 application/x-www-form-urlencoded 和 multipart/form-data。

如果您想使用其他内容类型，您实际上需要使用'php://input'。

例如

$data = json_decode(file_get_contents('php://input'), true);
$text = print_r($data, true);

然后您应该会看到一个包含图像数据的数组。