如何获取拖拽文件的文件名并保存到PHP变量（表单提交后可用）

要实现这个需求，我们只需要在现有代码基础上添加一个隐藏表单字段来存储文件名，让表单提交时将文件名和文本内容一起传给PHP即可。

修改后的HTML代码 #

<form method='post' action='' id='theform'>
  <textarea id='area' name='data'></textarea>
  <!-- 新增隐藏字段用于存储文件名 -->
  <input type="hidden" name="filename" id="filename">
</form>
<button id=sub onclick='theform.submit()'>SUBMIT</button>

修改后的JavaScript代码 #

function dropfile(file) {
  var reader = new FileReader();
  reader.onload = function(e) {
    area.value = e.target.result;
  };
  reader.readAsText(file, 'UTF-8');
}

area.ondrop = function(e) {
  e.preventDefault();
  var file = e.dataTransfer.files[0];
  // 将拖拽文件的名称存入隐藏字段
  document.getElementById('filename').value = file.name;
  dropfile(file);
};

PHP处理逻辑 #

表单提交后，你可以通过$_POST全局变量获取文件名，之后就能在PHP代码中任意使用这个变量：

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 获取拖拽的文件名，空值处理避免报错
    $uploadedFilename = $_POST['filename'] ?? '';
    // 获取文本文件内容
    $fileContent = $_POST['data'] ?? '';
    
    // 示例使用：输出文件名和内容（注意转义防止XSS）
    if (!empty($uploadedFilename)) {
        echo "拖拽的文件名：" . htmlspecialchars($uploadedFilename) . "<br>";
        echo "文件内容：<br>" . nl2br(htmlspecialchars($fileContent));
    }
}
?>

关键说明 #

• 隐藏字段filename负责在客户端暂存文件名，表单提交时会随文本内容一起发送到服务器端。
• JavaScript中通过file.name直接获取拖拽文件的原始名称，无需额外处理。
• PHP端接收时使用?? ''做空值兜底，同时用htmlspecialchars转义输出内容，避免安全风险。

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