PHP拖拽文字内容怎么获取?dataTransfer用法详解

看不見的法師

看不見的法師

2026-08-01

438人浏览

原创

php无法直接访问datatransfer对象,因其仅存在于浏览器端js环境中,需前端通过ajax或表单将getdata()获取的文本提交至php后端处理。

php拖拽文字内容怎么获取?datatransfer用法详解

PHP 本身不处理拖放(Drag & Drop)的前端交互,dataTransfer 是浏览器 DOM API 的一部分,只存在于 JavaScript 运行环境中。所谓“PHP 拖拽文字内容”,实际是前端用 JS 获取 dataTransfer 数据后,通过 AJAX 或表单提交传给 PHP 后端——PHP 永远收不到原始的 dataTransfer 对象。

为什么 PHP 无法直接访问 dataTransfer

dataTransfer 是浏览器在拖放过程中维护的临时内存对象,生命周期仅限于 dragstart → drop 事件链,且完全运行在客户端。PHP 运行在服务端,HTTP 请求发出时,dataTransfer 已销毁。试图在 PHP 中调用 $_POST['dataTransfer'] 或类似写法必然失败。

  • 常见错误现象:Notice: Undefined index: dataTransfer 或空字符串
  • 根本原因:没有前端 JS 主动提取并发送数据,PHP 就什么也收不到
  • 混淆点:有人把“拖文件上传”误认为“拖文字”,但文件上传走的是 event.dataTransfer.files,仍需 JS 转成 FormData 提交

JS 怎么从 dataTransfer 拿到文字内容

关键不是“怎么传给 PHP”,而是“JS 怎么先拿到”。必须在 drop 事件中调用 getData(),且前提是 dragstart 里设过数据:

  • 如果源元素是纯文本(如 <p>hello</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/gongju/2229" title="PHP 8.5.5"><img src="https://img.php.cn/upload/manual/001/246/273/6a03d2f895963707.jpeg" alt="PHP 8.5.5" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/gongju/2229" title="PHP 8.5.5" class="overflowclass">PHP 8.5.5</a> <p class="overflowclass">PHP 8.5.5 是 PHP 8.5 分支的维护更新版本。该版本延续了“小步快跑”的迭代逻辑,通过深度错误修复、底层性能微调以及安全加固,旨在为开发者提供一个更健壮、更高效的运行环境。该版本严格遵守语义化版本规范,不包含破坏性变更。</p> </div> <a rel="nofollow" href="/xiazai/gongju/2229" title="PHP 8.5.5" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>),浏览器默认会设 "text/plain",可直接 ev.dataTransfer.getData("text/plain")
  • 如果源是自定义 <div draggable="true">,必须手动在 <code>dragstart 中调用 setData(),否则 getData() 返回空字符串
  • 支持多格式读取:getData("text/html")getData("text/uri-list"),但后端 PHP 只能收到你显式提交的那一个
  • 示例(安全获取):

    dropZone.addEventListener('drop', (e) => {
      e.preventDefault();
      const text = e.dataTransfer.getData('text/plain') || e.target.innerText;
      // 然后发给 PHP
      fetch('/save.php', {
        method: 'POST',
        body: JSON.stringify({ content: text }),
        headers: { 'Content-Type': 'application/json' }
      });
    });

    PHP 接收时要注意什么

    PHP 收到的是普通 HTTP 请求载荷,和拖放无关——它只认 $_POST$_GET 或原始输入流:

    • 若前端用 JSON.stringify() 发送,PHP 需用 json_decode(file_get_contents('php://input'), true)
    • 若用 FormData(适合含文件),PHP 从 $_POST$_FILES 读取
    • 别忘了验证和过滤:htmlspecialchars()filter_var() 处理用户拖入的任意文本,防止 XSS
    • 字符编码要一致:JS 发送时用 UTF-8,PHP 接收时确保 mb_internal_encoding('UTF-8')

    真正容易被忽略的点:拖放文字内容是否来自可信源。用户可以拖入任意网页片段,里面可能含 script 标签、base64 图片甚至恶意 URL——PHP 不负责解析 HTML 安全性,JS 层该剥离就剥离,不该传的字段别往 PHP 送。

php免费学习视频:立即使用
踏上前端学习之旅,开启通往精通之路!从前端基础到项目实战,循序渐进,一步一个脚印,迈向巅峰!

相关专题

更多
php文件怎么打开
php文件怎么打开

打开php文件步骤:1、选择文本编辑器;2、在选择的文本编辑器中,创建一个新的文件,并将其保存为.php文件;3、在创建的PHP文件中,编写PHP代码;4、要在本地计算机上运行PHP文件,需要设置一个服务器环境;5、安装服务器环境后,需要将PHP文件放入服务器目录中;6、一旦将PHP文件放入服务器目录中,就可以通过浏览器来运行它。

2023.09.01

5455

6

php怎么取出数组的前几个元素
php怎么取出数组的前几个元素

取出php数组的前几个元素的方法有使用array_slice()函数、使用array_splice()函数、使用循环遍历、使用array_slice()函数和array_values()函数等。本专题为大家提供php数组相关的文章、下载、课程内容,供大家免费下载体验。

2023.10.11

3588

5

php反序列化失败怎么办
php反序列化失败怎么办

php反序列化失败的解决办法检查序列化数据。检查类定义、检查错误日志、更新PHP版本和应用安全措施等。本专题为大家提供php反序列化相关的文章、下载、课程内容,供大家免费下载体验。

2023.10.11

1786

5

php怎么连接mssql数据库
php怎么连接mssql数据库

连接方法:1、通过mssql_系列函数;2、通过sqlsrv_系列函数;3、通过odbc方式连接;4、通过PDO方式;5、通过COM方式连接。想了解php怎么连接mssql数据库的详细内容,可以访问下面的文章。

2023.10.23

2272

4

php连接mssql数据库的方法
php连接mssql数据库的方法

php连接mssql数据库的方法有使用PHP的MSSQL扩展、使用PDO等。想了解更多php连接mssql数据库相关内容,可以阅读本专题下面的文章。

2023.10.23

2784

6

html怎么上传
html怎么上传

html通过使用HTML表单、JavaScript和PHP上传。更多关于html的问题详细请看本专题下面的文章。php中文网欢迎大家前来学习。

2023.11.03

1999

9

PHP出现乱码怎么解决
PHP出现乱码怎么解决

PHP出现乱码可以通过修改PHP文件头部的字符编码设置、检查PHP文件的编码格式、检查数据库连接设置和检查HTML页面的字符编码设置来解决。更多关于php乱码的问题详情请看本专题下面的文章。php中文网欢迎大家前来学习。

2023.11.09

3030

8

php文件怎么在手机上打开
php文件怎么在手机上打开

php文件在手机上打开需要在手机上搭建一个能够运行php的服务器环境,并将php文件上传到服务器上。再在手机上的浏览器中输入服务器的IP地址或域名,加上php文件的路径,即可打开php文件并查看其内容。更多关于php相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

2023.11.13

2312

8

sprintf函数用法详解
sprintf函数用法详解

sprintf函数的用法:1、格式化字符串;2、指定输出宽度和精度;3、返回值。更多关于sprintf函数用法详解的内容,大家可以阅读下面的文章。

2023.11.27

10930

4

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
墨刀帮助中心
墨刀帮助中心

共0课时 | 0人学习

MyEclipse学习中心
MyEclipse学习中心

共0课时 | 0人学习

Apache Subversion 官方手册
Apache Subversion 官方手册

共0课时 | 0人学习