JS传图PHP存MySQL？手把手教你图像上传！

本文详细讲解如何将JavaScript获取的图片URL传递给PHP，并最终存储到MySQL数据库。 前端通过文件上传后，利用隐藏表单域将图片URL传递给后端PHP脚本`upload.php`。PHP脚本使用`$_POST`接收URL，并将其插入MySQL数据库。 教程包含前端JavaScript代码片段、HTML表单结构和PHP数据库操作代码，并详细解释了数据传递和数据库交互的流程，以及错误处理和页面跳转机制，帮助开发者快速实现图片上传和数据库存储功能。 通过学习本文，您可以轻松掌握JS与PHP结合进行图片上传和数据库存储的完整流程。

从前端JavaScript获取图片URL并将其传递给PHP进行数据库保存

本文将详细介绍如何将通过JavaScript动态添加到div（id为imgs_url）中的图片URL，传递给PHP页面，最终保存到MySQL数据库中。 问题源于一个前端文件上传后，需要将上传成功的图片URL存储到服务器数据库的需求。前端使用JavaScript将图片URL添加到一个div中，而PHP页面负责数据库操作。如何将前端的图片URL可靠地传递到后端PHP，并最终保存到数据库，是本文的核心内容。

解决方法的关键在于利用表单的提交机制。由于JavaScript运行于浏览器端，而PHP运行于服务器端，两者之间需要一个桥梁来传递数据。这个桥梁就是HTTP请求，我们可以通过表单提交来实现。

首先，我们需要修改前端JavaScript代码，将获取到的图片URL不直接添加到div中显示，而是将其赋值给一个隐藏的表单输入域。 代码如下：

uploader.on('uploadSuccess', function(file, response) {
  $('#imgs_url').val(response.imgurl); 
});

这段代码在上传成功后，将response.imgurl的值赋给id为imgs_url的隐藏input元素。 我们需要在HTML表单中添加这个隐藏的input元素：

<form method="post" action="upload.php">
  &lt;input type=&quot;hidden&quot; id=&quot;imgs_url&quot; name=&quot;imgs_url&quot; value=&quot;&quot;&gt;
</form>

注意，这个input元素的name属性必须与PHP端接收数据的变量名一致。 随后，触发表单提交，将数据发送到PHP页面upload.php。

在upload.php页面中，我们可以通过$_POST['imgs_url']获取到从前端传递过来的图片URL。 然后，可以使用PHP代码将这个URL保存到MySQL数据库。 一个简单的示例：

$img_url = $_POST['imgs_url'];
// 数据库连接和保存操作...
// 例如：
$conn = new mysqli("localhost","user","password","database");
$sql = "INSERT INTO images (url) VALUES ('" . $img_url . "')";
if ($conn->query($sql) === TRUE) {
  //成功处理
  $next_page = "show_image.php?img_url=" . urlencode($img_url);
  header("Location: $next_page");
} else {
  //错误处理
}
$conn->close();

最后，upload.php 可以通过 header("Location: ...") 将用户重定向到另一个页面，例如 show_image.php，并通过URL参数传递图片URL。 这样就可以在后续页面中展示上传的图片。 整个过程的关键在于利用隐藏表单域作为前端JavaScript和后端PHP之间的数据桥梁，实现数据的可靠传递。

今天关于《JS传图PHP存MySQL？手把手教你图像上传！》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！