JS+php后台实现文件上传功能详解

下面我来给您详细讲解一下“JS+php后台实现文件上传功能”的完整攻略。

一、介绍

在web开发中，通常需要实现文件上传功能。本文将介绍如何使用JS和php后台实现文件上传功能，并提供两个示例。

二、JS文件上传

文件上传的第一步是使用JS实现前端文件上传，主要步骤如下：

创建一个表单，使用input标签的type为file，以允许用户选择上传的文件。

<form action="" method="POST" enctype="multipart/form-data" id="uploadForm">
  <input type="file" name="file" id="fileInput">
  <button type="submit" id="submitBtn">上传</button>
</form>

给按钮绑定点击事件，在点击事件中获取用户选择的文件，并通过FormData对象将文件传递到后台。

const uploadForm = document.querySelector('#uploadForm');
const fileInput = document.querySelector('#fileInput');

// 点击按钮上传文件
const submitBtn = document.querySelector('#submitBtn');
submitBtn.onclick = function() {
  const formData = new FormData();
  formData.append('file', fileInput.files[0]);
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload.php');
  xhr.send(formData);
  // 在上传完成后可以执行一些操作，比如提示用户上传成功
}

三、PHP后台处理

完成了文件上传的前端处理后，需要使用PHP来完成后台处理，将文件保存在服务器端的指定目录。主要步骤如下：

获取上传的文件，可以使用$_FILES全局变量获取。

if (!empty($_FILES)) {
  $uploadedFile = $_FILES['file'];
}

保存文件，可以使用move_uploaded_file函数将文件保存在指定路径下。

if (!empty($_FILES)) {
  $uploadedFile = $_FILES['file'];

  $tempFilePath = $uploadedFile['tmp_name'];
  $targetFileName = $uploadedFile['name'];
  $targetFilePath = 'uploads/' . $targetFileName;
  move_uploaded_file($tempFilePath, $targetFilePath);
}

四、示例

下面提供两个示例，分别演示了如何使用JS+php实现文件上传功能。

示例1：使用AJAX上传文件

<!-- HTML -->
<form action="" method="POST" enctype="multipart/form-data" id="uploadForm">
  <input type="file" name="file" id="fileInput">
  <button type="submit" id="submitBtn">上传</button>
</form>
<div id="progress"></div>

<!-- JS -->
const uploadForm = document.querySelector('#uploadForm');
const fileInput = document.querySelector('#fileInput');
const progress = document.querySelector('#progress');

// 点击按钮上传文件
const submitBtn = document.querySelector('#submitBtn');
submitBtn.onclick = function() {
  const formData = new FormData();
  formData.append('file', fileInput.files[0]);
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload.php');

  // 绑定上传进度事件
  xhr.upload.onprogress = function(event) {
    if (event.lengthComputable) {
      const percent = Math.round(event.loaded / event.total * 100);
      progress.textContent = percent + '%';
    }
  }

  xhr.send(formData);
  // 在上传完成后可以执行一些操作，比如提示用户上传成功
}

示例2：使用Dropzone上传文件

<!-- HTML -->
<div id="dropzone"></div>

<!-- JS -->
const dropzone = new Dropzone('#dropzone', {
  url: '/upload.php',
  paramName: 'file',
  maxFiles: 1,
  maxFilesize: 1024 * 1024 * 10, // 10MB
  acceptedFiles: 'image/*',
  dictDefaultMessage: '拖拽或点击上传文件',
  dictFileTooBig: '文件太大，最大支持10MB',
  dictInvalidFileType: '文件类型错误，只支持图片格式',
  previewsContainer: false,

  // 上传成功回调
  success: function(file, response) {
    alert('上传成功！');
  }
});