從前端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之間的數據橋梁，實現數據的可靠傳遞。
