学习js如何实现图片上传并将其存储在数据库中 (js实现上传图片并保存到数据库)
学习 Javascript 如何实现图片上传并将其存储在数据库中
在现代 Web 开发中，图片上传是常见的功能之一，特别是对于电商、社交等网站而言。JavaScript 是一种流行的编程语言，可以完成许多 Web 应用程序开发任务。本文将介绍如何使用 JavaScript 实现图片上传功能并将其存储在数据库中。
一、准备工作
在实现图片上传功能之前，我们需要准备以下工作：
1. 服务器端代码：我们需要使用 PHP 或其他服务器端技术来接收并处理图像数据。
2. 数据库：在将图像数据存储在数据库中之前，我们需要创建一个数据库。在这里我们将使用 MySQL。
3. HTML 页面：我们需要在 HTML 页面中添加一个表单和一些 JavaScript 代码，以便能够将图像数据发送到服务器并进行处理。
二、制作 HTML 页面
我们需要创建一个 HTML 页面，以便能够上传图像。以下是一个基本的表单示例：
“`html
“`
在上面的代码中，我们设置了一个输入类型为文件的输入字段，并将表单的操作设置为“upload.php”，这是我们将上传数据发送到的服务器脚本。我们还添加了一个提交按钮，以便能够发送表单数据。
三、上传图像
接下来，我们需要将 JavaScript 代码添加到 HTML 页面中，以便能够将输入字段中选择的图像数据上传到 Web 服务器。以下是上传图像的 JavaScript 代码示例：
“`javascript
const form = document.querySelector(‘form’);
const fileInput = document.querySelector(‘input[type=”file”]’);
form.addEventListener(‘submit’, event => {
event.preventDefault();
const files = fileInput.files;
const formData = new FormData();
formData.append(‘image’, files[0]);
fetch(‘/upload.php’, {
method: ‘POST’,
body: formData
}).then(response => {
console.log(response);
}).catch(error => {
console.error(error);
});
});
“`
在上面的代码中，我们使用 FormData 对象创建一个数据包，并在将其发送到服务器之前将选定的文件添加到 formData 中。我们还使用 fetch 函数将FormData同步发送到服务器。
四、接收并处理数据
在服务器端，我们需要接收并处理通过 JavaScript 代码发送的图像数据。以下是服务器端 PHP 代码的示例：
“`php
$servername = “localhost”;
$username = “username”;
$password = “password”;
$dbname = “myDB”;
// 创建链接
$conn = new mysqli($servername, $username, $password, $dbname);
// 检查链接
if ($conn->connect_error) {
die(“Connection fled: ” . $conn->connect_error);
}
// 从multipart/form-data中获取图像数据
$image = $_FILES[‘image’][‘tmp_name’];
$image = file_get_contents($image);
$image = base64_encode($image);
$sql = “INSERT INTO images (image) VALUES (‘$image’)”;
if ($conn->query($sql) === TRUE) {
echo “New record created successfully”;
} else {
echo “Error: ” . $sql . “
” . $conn->error;
}
$conn->close();
?>
“`
在上面的代码中，我们将选定的图像转换为 base64 编码数据，并将其存储在数据库中。将图片存储在数据库的另一种方法是将其存储在服务器的文件系统中，并将其路径存储在数据库中。
五、
至此，我们已成功实现了使用 JavaScript 上传图像并将其存储在数据库中的过程。我们创建了一个 HTML 表单来选择图像，使用 JavaScript 将其上传到服务器，并使用 PHP 将其存储在数据库中。这些技术不仅能上传图像，还可以用于上传和处理其他文件或数据类型。
