Asynchronous drag and drop upload file--small example
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">
請(qǐng)拖入上傳的文件
</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;
}All of the above That’s the entire content of this article, I hope you all like it.
For more articles related to Js+php implementing asynchronous drag-and-drop uploading files, please pay attention to the PHP Chinese website!
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Grass Wonder Build Guide | Uma Musume Pretty Derby
1 months ago
By Jack chen
Roblox: 99 Nights In The Forest - All Badges And How To Unlock Them
4 weeks ago
By DDD
Uma Musume Pretty Derby Banner Schedule (July 2025)
1 months ago
By Jack chen
RimWorld Odyssey Temperature Guide for Ships and Gravtech
3 weeks ago
By Jack chen
Windows Security is blank or not showing options
1 months ago
By 下次還敢
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
