从前端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之间的数据桥梁，实现数据的可靠传递。
