实现ajax拖拽上传文件（附有代码）
这篇文章主要教大家如何简单实现ajax拖拽上传文件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
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>
<p class="box">+</p>
<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拖拽上传文件（附有代码）的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
可以删除Tmp格式文件吗？
Feb 24, 2024 pm 04:33 PM
Tmp格式文件是一种临时文件格式，通常由计算机系统或程序在执行过程中生成。这些文件的目的是存储临时数据，以帮助程序正常运行或提高性能。一旦程序执行完成或计算机重启，这些tmp文件往往就没有了存在的必要性。所以，对于Tmp格式文件来说，它们本质上是可以删除的。而且，删除这些tmp文件能够释放硬盘空间，确保计算机的正常运行。但是，在删除Tmp格式文件之前，我们需
出现0x80004005错误代码怎么办 小编教你0x80004005错误代码解决方法
Mar 21, 2024 pm 09:17 PM
在电脑中删除或解压缩文件夹，时有时候会弹出提示对话框“错误0x80004005：未指定错误”，如果遇到这中情况应该怎么解决呢？提示错误代码0x80004005的原因其实有很多，但大部分因为病毒导致，我们可以重新注册dll来解决问题，下面，小编给大伙讲解0x80004005错误代码处理经验。有用户在使用电脑时出现错误代码0X80004005的提示，0x80004005错误主要是由于计算机没有正确注册某些动态链接库文件，或者计算机与Internet之间存在不允许的HTTPS连接防火墙所引起。那么如何
斜杠和反斜杠在文件路径中的不同使用
Feb 26, 2024 pm 04:36 PM
文件路径是操作系统中用于识别和定位文件或文件夹的字符串。在文件路径中，常见的有两种符号分隔路径，即正斜杠（/）和反斜杠（）。这两个符号在不同的操作系统中有不同的使用方式和含义。正斜杠（/）是Unix和Linux系统中常用的路径分隔符。在这些系统中，文件路径是以根目录（/）为起始点，每个目录之间使用正斜杠进行分隔。例如，路径/home/user/Docume
PHP 与 Ajax：构建一个自动完成建议引擎
Jun 02, 2024 pm 08:39 PM
使用PHP和Ajax构建自动完成建议引擎：服务器端脚本：处理Ajax请求并返回建议(autocomplete.php)。客户端脚本：发送Ajax请求并显示建议(autocomplete.js)。实战案例：在HTML页面中包含脚本并指定search-input元素标识符。
夸克网盘的文件怎么转移到百度网盘？
Mar 14, 2024 pm 02:07 PM
夸克网盘和百度网盘都是现在最常用的储存文件的网盘软件，如果想要将夸克网盘内的文件保存到百度网盘，要怎么操作呢？本期小编整理了夸克网盘电脑端的文件转移到百度网盘的教程步骤，一起来看看是怎么操作吧。 夸克网盘的文件怎么保存到百度网盘？要将夸克网盘的文件转移到百度网盘，首先需在夸克网盘下载所需文件，然后在百度网盘客户端中选择目标文件夹并打开。接着，将夸克网盘中下载的文件拖放到百度网盘客户端打开的文件夹中，或者使用上传功能将文件添加至百度网盘。确保上传完成后在百度网盘中查看文件是否成功转移。这样就
hiberfil.sys是什么文件？hiberfil.sys可以删除吗？
Mar 15, 2024 am 09:49 AM
最近有很多网友问小编，hiberfil.sys是什么文件？hiberfil.sys占用了大量的C盘空间可以删除吗？小编可以告诉大家hiberfil.sys文件是可以删除的。下面就来看看详细的内容。hiberfil.sys是Windows系统中的一个隐藏文件，也是系统休眠文件。通常存储在C盘根目录下，其大小与系统安装内存大小相当。这个文件在计算机休眠时被使用，其中包含了当前系统的内存数据，以便在恢复时快速恢复到之前的状态。由于其大小与内存容量相等，因此它可能会占用较大的硬盘空间。 hiber
Linux系统查看log日志命令详解！
Mar 06, 2024 pm 03:55 PM
在Linux系统中，可以使用以下命令来查看日志文件的内容：tail命令：tail命令用于显示日志文件的末尾内容。它是查看最新日志信息的常用命令。tail[选项][文件名]常用的选项包括：-n：指定要显示的行数，默认为10行。-f：实时监视文件内容，并在文件更新时自动显示新的内容。示例：tail-n20logfile.txt#显示logfile.txt文件的最后20行内容tail-flogfile.txt#实时监视logfile.txt文件的更新内容head命令：head命令用于显示日志文件的开头
MySQL中.ibd文件的作用详解及相关注意事项
Mar 15, 2024 am 08:00 AM
MySQL中.ibd文件的作用详解及相关注意事项MySQL是一种流行的关系型数据库管理系统，数据库中的数据存储在不同的文件中。其中，.ibd文件是InnoDB存储引擎中的数据文件，用于存储表中的数据和索引。本文将对MySQL中.ibd文件的作用进行详细解析，并提供相关代码示例以帮助读者更好地理解。一、.ibd文件的作用：存储数据：.ibd文件是InnoDB存
