Js+php实现异步拖拽上传文件示例
时间：2021-01-27
来源：互联网
标签：
本文给大家分享的是使用php结合js实现异步拖拽上传文件的代码，及示例，有需要的小伙伴可以参考下。
异步拖拽上传文件--小实例
upload.html
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#box{
width:150px;height: 150px;border: 1px solid red;
}
</style>
<script type="text/javascript" src="XMLhttpReuest.js"></script>
<script>
window.onload = function () {
var box = document.getElementById('box');
box.ondragenter = function (e) {
e.preventDefault();
}
box.ondragover = function (e) {
e.preventDefault();
}
box.ondragleave = function (e) {
e.preventDefault();
}
box.ondrop = function (e) {
e.preventDefault();
var file = e.dataTransfer.files[0];
var formData = new FormData();
formData.append('aa', file);
var xml = ajaxFunction();
xml.open("post", './upload.php', true);
xml.send(formData);
xml.onreadystatechange = function () {
if (xml.readyState == 4 && xml.status == 200) {
var flag = xml.responseText;
console.log(flag);
if (flag == 1) {
// box.innerHTML="上传成功";
alert('上传成功');
}
}
}
}
}
</script>
</head>
<body>
<div id="box">
请拖入上传的文件
</div>
</body>
</html>
upload.php
复制代码 代码如下:
<?php
header("Content-Type:text/html;charset=UTF-8");
if(is_uploaded_file($_FILES['aa']['tmp_name'])){
move_uploaded_file($_FILES['aa']['tmp_name'], "./".iconv("UTF-8", "GBK", $_FILES['aa']['name']));
echo '1';
}
XMLhttpReuest.js
function ajaxFunction()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("您的浏览器不支持AJAX！");
return false;
}
}
}
return xmlHttp;
}
以上所述就是本文的全部内容了，希望大家能够喜欢。
-
request.getParameter是从哪里获取数据? 时间：2025-11-18 -
简述TCP和UDP的主要区别及应用场景 时间：2025-11-18 -
Git和SVN的区别、优缺点和应用场景 时间：2025-11-18 -
Sqoop下载、安装与配置详解 时间：2025-11-18 -
Keepalived下载、配置、原理详解 时间：2025-11-18 -
Java.sql.Timestamp用法详解(构造方法、功能、方法摘要、实例代码) 时间：2025-11-18
今日更新
-
知乎网页版入口在哪里 知乎网页版一键直达
阅读：18
-
币安为何取消爆仓预警功能？深度解析背后原因与影响
阅读：18
-
微信视频号官网网页版入口 视频号助手电脑版一键登录
阅读：18
-
学信网官网登录入口-学历查询唯一官方平台
阅读：18
-
币安合约机制漏洞修复进展及最新动态
阅读：18
-
上下齐手梗揭秘：全网爆火的搞笑动作出处，看完秒懂为何人人模仿！
阅读：18
-
上香是什么梗 揭秘网络流行语上香的含义和出处
阅读：18
-
中国高等教育学生信息网-学信网官方学历查询认证平台
阅读：18
-
高德地图网页版入口在哪 在线使用高德地图网页版
阅读：18
-
币安仓位清零原因解析 爆仓率低背后机制揭秘
阅读：18
