如何通过JavaScript将图片URL传递给PHP并保存到MySQL数据库？

从前端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元素：

立即学习“PHP免费学习笔记（深入）”；

<form method="post" action="upload.php">
  <input type="hidden" id="imgs_url" name="imgs_url" value="">
</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之间的数据桥梁，实现数据的可靠传递。

以上就是如何通过JavaScript将图片URL传递给PHP并保存到MySQL数据库？的详细内容，更多请关注php中文网其它相关文章！