当前位置：首页 > 行业动态 > 正文

ajax上传图片到数据库

admin
行业动态
2025-03-19
2

“

javascript，var formData = new FormData();，formData.append("file", fileInput.files[0]);$.ajax({， url: 'upload.php',， type: 'POST',， data: formData,， contentType: false,， processData: false,， success: function(response) {， console.log(response);， }，});，

` 在服务器端（upload.php），可以使用以下PHP代码处理文件上传：`

php，if ($_FILES["file"]["error"] == UPLOAD_ERR_OK) {， $tmp_name = $_FILES["file"]["tmp_name"];， $name = basename($_FILES["file"]["name"]);， move_uploaded_file($tmp_name, "uploads/$name");， echo "Upload successful!";，} else {， echo "Error in uploading file!";，}，

“

使用Ajax上传图片到数据库

一、前端部分

1、HTML代码：创建一个文件选择框和一个按钮，用于触发图片上传操作。

 <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>Ajax图片上传</title>
   </head>
   <body>
       <input type="file" id="imageInput" name="image">
       <button onclick="uploadImage()">上传图片</button>
       <img id="preview" src="#" alt="Image Preview" style="display:none;max-width:300px;">
       <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
       <script>
           function uploadImage(){
               var formData = new FormData();
               var imageInput = document.getElementById('imageInput');
               formData.append('image', imageInput.files[0]);
               $.ajax({
                   url: 'upload.php', // 服务器端处理脚本的URL
                   type: 'POST',
                   data: formData,
                   processData: false,
                   contentType: false,
                   success: function(response){
                       console.log(response);
                       alert('图片上传成功');
                   },
                   error: function(){
                       alert('图片上传失败');
                   }
               });
           }
       </script>
   </body>
   </html>

2、说明：上述代码中，通过FormData对象将文件选择框中的图片文件添加到表单数据中，然后使用jQuery的$.ajax()方法发送异步请求到服务器端的upload.php脚本，在请求成功后，会弹出提示框告知用户图片上传成功。

二、后端部分（以PHP为例）

1、PHP代码：在服务器端，需要编写一个脚本来接收并处理上传的图片文件，并将其存储到数据库中。

 <?php
   $servername = "localhost";
   $username = "username";
   $password = "password";
   $dbname = "myDB";
   $conn = new mysqli($servername, $username, $password, $dbname);
   if ($conn->connect_error) {
       die("连接失败: " . $conn->connect_error);
   }
   if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_FILES['image'])) {
       $target_dir = "uploads/";
       $target_file = $target_dir . basename($_FILES["image"]["name"]);
       $imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
       $check = getimagesize($_FILES["image"]["tmp_name"]);
       if($check !== false) {
           $uploadOk = 1;
       } else {
           echo "文件不是图片";
           $uploadOk = 0;
       }
       if ($uploadOk == 0) {
           echo "抱歉，您的文件未被上传。";
       } else {
           if (move_uploaded_file($_FILES["image"]["tmp_name"], $target_file)) {
               $stmt = $conn->prepare("INSERT INTO images (image) VALUES (?)");
               $imagePath = fopen($target_file, "rb");
               $stmt->bind_param("b", $imagePath);
               $stmt->execute();
               $stmt->close();
               fclose($imagePath);
               echo "图片上传成功";
           } else {
               echo "抱歉，无法上传，请尝试再次上传。";
           }
       }
   }
   $conn->close();
   ?>

2、说明：上述PHP代码首先连接到MySQL数据库，然后检查是否有图片文件通过POST请求上传，如果有，它会验证文件是否为图片，并将图片移动到指定的目录，使用预处理语句将图片插入到数据库中，最后关闭数据库连接。

步骤	描述	代码片段
前端HTML	创建文件选择框和按钮
前端JS	使用FormData和Ajax上传图片	`var formData = new FormData(); var imageInput = document.getElementById('imageInput'); formData.append('image', imageInput.files[0]); $.ajax({...})`
后端PHP	接收并处理上传的图片	`if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_FILES['image'])) {...}`
后端PHP	将图片插入数据库	`$stmt = $conn->prepare("INSERT INTO images (image) VALUES (?)"); $imagePath = fopen($target_file, "rb"); $stmt->bind_param("b", $imagePath); $stmt->execute(); $stmt->close(); fclose($imagePath);`