当前位置：首页 > news >正文

PHP：点击/拖动-上传图片文件目录，并存入数据库

news 来源：原创 2025/4/26 1:54:08

一、效果

实现效果，可点击选择文件按钮/直接将文件拖动到虚线框中选择文件

二、主页面实现

1、引入文件

在主页面upload.php界面中引入上传图片的文件，数据库连接的文件，连接数据

2、视图层

实现主页面上传图片的视图层效果

标题+文件的form表单

3、样式层

主要使用样式，实现：页面布局、间距、边框等效果

4、逻辑层-js

实现了一个支持拖放上传和点击上传的图片上传功能，适用于现代 Web 应用。它结合了 HTML5 的拖放 API 和 FormData 对象，通过 AJAX 提交表单数据，并在前端动态显示上传进度和结果。

(1). 获取 DOM 元素

const dropArea = document.getElementById('dropArea');
const fileInput = document.getElementById('avatar');
const preview = document.getElementById('preview');

作用：获取页面中的关键元素。
- dropArea：拖放区域，用户可以将文件拖放到这里。
- fileInput：隐藏的文件输入框，用于选择文件。
- preview：用于显示上传图片的预览。

(2). 拖放事件监听

['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {dropArea.addEventListener(eventName, preventDefaults, false);
});
function preventDefaults(e) {e.preventDefault();
    e.stopPropagation();
}

作用：处理拖放事件，确保浏览器不会执行默认行为（如打开文件）。
- preventDefaults 函数阻止了默认的拖放行为，防止文件被直接打开。
- 监听的事件包括：
  - dragenter：当拖动的文件进入目标区域时触发。
  - dragover：当拖动的文件在目标区域上方移动时触发。
  - dragleave：当拖动的文件离开目标区域时触发。
  - drop：当文件被释放到目标区域时触发。

(3). 拖放区域样式变化

['dragenter', 'dragover'].forEach(eventName => {dropArea.addEventListener(eventName, () => dropArea.classList.add('dragover'), false);
});
['dragleave', 'drop'].forEach(eventName => {dropArea.addEventListener(eventName, () => dropArea.classList.remove('dragover'), false);
});

作用：动态改变拖放区域的样式，提升用户体验。
- 当文件拖入区域时，添加 dragover 样式类（例如改变边框颜色）。
- 当文件离开或被释放时，移除 dragover 样式类，恢复原样。

(4). 处理拖放文件

dropArea.addEventListener('drop', handleDrop, false);
function handleDrop(e) {const dt = e.dataTransfer;const files = dt.files;if (files.length > 0) {fileInput.files = files; // 将拖放的文件赋值给隐藏的文件输入框handleFile(files[0]);}
}

作用：处理用户拖放的文件。
- e.dataTransfer.files 获取拖放的文件列表。
- 如果文件存在，将其赋值给隐藏的文件输入框（fileInput），并调用 handleFile 函数处理文件预览。

(5). 处理文件选择

fileInput.addEventListener('change', function(e) {const file = e.target.files[0];if (file) {handleFile(file);}
});

作用：监听文件输入框的变化事件。
- 当用户通过点击选择文件时，获取选中的文件并调用 handleFile 函数进行预览。

(6). 文件预览

function handleFile(file) {const reader = new FileReader();reader.onload = function(event) {preview.src = event.target.result;preview.style.display = 'block';};reader.readAsDataURL(file);
}

作用：生成文件的预览图。
- 使用 FileReader 读取文件内容。
- 读取完成后，将文件的 Base64 数据赋值给 <img> 元素的 src 属性，从而显示图片预览。

(7). 表单提交

document.getElementById('uploadForm').addEventListener('submit', function(e) {e.preventDefault();const formData = new FormData(this);const messageDiv = document.getElementById('message');messageDiv.innerHTML = '上传中...&#