基于JavaScript+PHP的图片上传：如何保留原始文件名？

嘿，很高兴你的CMS图库上传器已经顺利跑起来了！要实现上传时保留图片的原始文件名，咱们从前端到后端一步步调整就行，其实并不复杂：

首先在你的文件选择页面里，监听用户选择文件的事件，把原始文件名存下来——浏览器的File对象本身就自带name属性，直接拿就行：

<!-- 你的文件选择输入框 -->
<input type="file" id="imageUpload" accept="image/*">
<!-- 可选：显示选中的文件名给用户看 -->
<p>当前选中文件: <span id="selectedFileName"></span></p>

对应的JS监听逻辑：

const uploadInput = document.getElementById('imageUpload');
uploadInput.addEventListener('change', function(e) {
  const selectedFile = e.target.files[0];
  if (selectedFile) {
    // 把原始文件名存在全局变量或者你上传逻辑的上下文里
    window.originalImageName = selectedFile.name;
    // 显示文件名（可选）
    document.getElementById('selectedFileName').textContent = selectedFile.name;
    // 这里继续你原本的图片尺寸调整流程...
  }
});

在你处理完图片尺寸调整，准备用FormData发起上传请求时，把原始文件名和调整后的图片数据一起打包：

// 假设你已经把调整后的图片转成了Blob对象，叫resizedImageBlob
const uploadFormData = new FormData();
// 重点：FormData.append的第三个参数就是要传给后端的文件名，直接用原始文件名就行
uploadFormData.append('uploadedImage', resizedImageBlob, window.originalImageName);

// 如果你更习惯单独传文件名字段，也可以这么加：
// uploadFormData.append('originalFileName', window.originalImageName);

// 然后发起上传请求（这里用fetch示例，你也可以用XHR）
fetch('your-server-handler.php', {
  method: 'POST',
  body: uploadFormData
})
.then(res => res.json())
.then(result => {
  console.log('上传成功:', result);
  // 处理后续逻辑，比如更新图库列表
})
.catch(err => {
  console.error('上传出错:', err);
});

到了服务器端，你就能拿到原始文件名了，然后做安全处理后存入数据库：

<?php
// 情况1：如果是通过FormData第三个参数传的文件名
$originalFileName = $_FILES['uploadedImage']['name'];

// 情况2：如果是单独传的字段，就用POST获取
// $originalFileName = $_POST['originalFileName'];

// 安全处理：一定要过滤文件名，防止恶意路径或特殊字符
// 方法1：用basename只保留文件名部分，去掉路径
$safeFileName = basename($originalFileName);
// 方法2：用正则过滤非合法字符
// $safeFileName = preg_replace('/[^a-zA-Z0-9_\-\.]/', '', $originalFileName);

// 如果你需要把图片存到服务器目录
$uploadDir = './gallery-uploads/';
// 确保目录存在
if (!is_dir($uploadDir)) mkdir($uploadDir, 0755, true);
$serverFilePath = $uploadDir . $safeFileName;
// 移动临时文件到目标目录
move_uploaded_file($_FILES['uploadedImage']['tmp_name'], $serverFilePath);

// 最后写入SQL数据库
// 这里用PDO示例，你可以换成自己的数据库操作方式
try {
  $pdo = new PDO('mysql:host=你的数据库地址;dbname=你的数据库名', '用户名', '密码');
  $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  
  $stmt = $pdo->prepare("INSERT INTO gallery_images (original_name, file_path, upload_time) VALUES (?, ?, NOW())");
  $stmt->execute([$safeFileName, $serverFilePath]);
  
  echo json_encode(['status' => 'success', 'message' => '图片上传并保存成功']);
} catch(PDOException $e) {
  echo json_encode(['status' => 'error', 'message' => '数据库错误: ' . $e->getMessage()]);
}
?>

关键注意点 #

• 安全第一：原始文件名可能包含特殊字符或者恶意路径（比如../../恶意文件.php），所以必须做安全过滤，上面的两种方法任选其一都可以。
• 如果你的上传逻辑不需要把图片存到服务器本地，只需要存到SQL的BLOB字段，那也一样，把originalFileName和图片二进制数据一起存入数据库就行。

这样调整完，你的上传器就能完美保留用户上传图片的原始文件名啦！

内容的提问来源于stack exchange，提问作者tim_baland212