异步拖拽上传文件--小实例
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;
}
以上所述就是本文的全部内容了，希望大家能够喜欢。
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索html5拖拽异步上传、javascript 拖拽上传、javascript 拖拽、javascript 拖拽事件、javascript 实现拖拽，以便于您获取更多的相关知识。
时间： 2025-01-27 00:01:39