图片上传、预览以及图片删除

2023-11-29 19:15:15

图片上传，预览以及图片删除是许多网站和应用程序需要实现的基本功能。在本文中，我们将介绍如何使用 JavaScript 和 PHP 来实现这些功能。

图片上传

要实现图片上传，我们需要使用 HTML 表单中的 <input type="file"> 元素。当用户选择要上传的图片时，浏览器会将图片数据作为二进制数据发送到服务器。

在服务器端，我们可以使用 PHP 的 $_FILES 数组来获取上传的图片数据。$_FILES 数组中的每个元素代表一个上传的文件，其中包含了文件名、文件大小、文件类型等信息。

if (isset($_FILES['image'])) {
  $file_name = $_FILES['image']['name'];
  $file_size = $_FILES['image']['size'];
  $file_type = $_FILES['image']['type'];
  $file_tmp_name = $_FILES['image']['tmp_name'];

  // 检查文件类型是否允许上传
  if ($file_type != 'image/jpeg' && $file_type != 'image/png' && $file_type != 'image/gif') {
    echo '文件类型不允许上传';
    exit;
  }

  // 检查文件大小是否超过限制
  if ($file_size > 2097152) {
    echo '文件大小超过限制';
    exit;
  }

  // 将文件移动到指定目录
  move_uploaded_file($file_tmp_name, 'uploads/' . $file_name);

  echo '文件上传成功';
}

图片预览

在图片上传成功后，我们可以在页面上显示图片的预览。我们可以使用 HTML 的 <img> 元素来显示图片。

<img src="uploads/<?php echo $file_name; ?>" alt="<?php echo $file_name; ?>" />

图片删除

要实现图片删除，我们需要在服务器端提供一个删除图片的接口。我们可以使用 PHP 的 unlink() 函数来删除图片。

if (isset($_GET['file_name'])) {
  $file_name = $_GET['file_name'];

  // 删除图片
  unlink('uploads/' . $file_name);

  echo '文件删除成功';
}

示例代码

以下是一个简单的示例代码，演示了如何使用 JavaScript 和 PHP 来实现图片上传、预览和删除功能。

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>图片上传</h1>
  <form action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="image" />
    <input type="submit" value="上传" />
  </form>

  <?php if (isset($_FILES['image'])) { ?>
    <h1>图片预览</h1>
    <img src="uploads/<?php echo $_FILES['image']['name']; ?>" alt="<?php echo $_FILES['image']['name']; ?>" />

    <h1>图片删除</h1>
    <a href="delete.php?file_name=<?php echo $_FILES['image']['name']; ?>">删除</a>
  <?php } ?>
</body>
</html>

// 上传图片
if (isset($_FILES['image'])) {
  $file_name = $_FILES['image']['name'];
  $file_size = $_FILES['image']['size'];
  $file_type = $_FILES['image']['type'];
  $file_tmp_name = $_FILES['image']['tmp_name'];

  // 检查文件类型是否允许上传
  if ($file_type != 'image/jpeg' && $file_type != 'image/png' && $file_type != 'image/gif') {
    echo '文件类型不允许上传';
    exit;
  }

  // 检查文件大小是否超过限制
  if ($file_size > 2097152) {
    echo '文件大小超过限制';
    exit;
  }

  // 将文件移动到指定目录
  move_uploaded_file($file_tmp_name, 'uploads/' . $file_name);

  echo '文件上传成功';
}

// 删除图片
if (isset($_GET['file_name'])) {
  $file_name = $_GET['file_name'];

  // 删除图片
  unlink('uploads/' . $file_name);

  echo '文件删除成功';
}