本篇文章给大家分享的是有关使用ajax怎么实现一个拖拽上传文件功能，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。<!DOCTYPE html><ht
本篇文章给大家分享的是有关使用ajax怎么实现一个拖拽上传文件功能，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta Http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box { width: 300px; height: 300px; border: 1px solid #000; text-align: center; line-height: 300px; font-size: 40px; } </style></head><body> <div class="box">+</div> <script> var box = document.querySelector('.box'); box.ondraGover = function (e) { e.preventDefault(); } box.ondrop = function (e) { console.log(e.dataTransfer) e.preventDefault(); var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responseText) } } xhr.open('POST', './server.PHP', true); var fORMdata = new FormData(); formdata.append('pic', e.dataTransfer.files[0]); formdata.append('name', 'luyao'); xhr.send(formdata); } </script></body></html>//server.php
<?php $rand = rand(1,1000).'.jpg'; move_uploaded_file($_FILES['pic']['tmp_name'], './uploads/'.$rand); echo '/uploads/'.$rand;以上就是使用ajax怎么实现一个拖拽上传文件功能，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注编程网精选频道。
--结束END--
本文标题: 使用ajax怎么实现一个拖拽上传文件功能
本文链接: https://www.lsjlt.com/news/252387.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0