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">
请拖入上传的文件
</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!
Working with Flash Session Data in LaravelMar 12, 2025 pm 05:08 PMLaravel simplifies handling temporary session data using its intuitive flash methods. This is perfect for displaying brief messages, alerts, or notifications within your application. Data persists only for the subsequent request by default: $request-
cURL in PHP: How to Use the PHP cURL Extension in REST APIsMar 14, 2025 am 11:42 AMThe PHP Client URL (cURL) extension is a powerful tool for developers, enabling seamless interaction with remote servers and REST APIs. By leveraging libcurl, a well-respected multi-protocol file transfer library, PHP cURL facilitates efficient execution of various network protocols, including HTTP, HTTPS, and FTP. This extension offers granular control over HTTP requests, supports multiple concurrent operations, and provides built-in security features.
PHP Logging: Best Practices for PHP Log AnalysisMar 10, 2025 pm 02:32 PMPHP logging is essential for monitoring and debugging web applications, as well as capturing critical events, errors, and runtime behavior. It provides valuable insights into system performance, helps identify issues, and supports faster troubleshoot
Simplified HTTP Response Mocking in Laravel TestsMar 12, 2025 pm 05:09 PMLaravel provides concise HTTP response simulation syntax, simplifying HTTP interaction testing. This approach significantly reduces code redundancy while making your test simulation more intuitive. The basic implementation provides a variety of response type shortcuts: use Illuminate\Support\Facades\Http; Http::fake([ 'google.com' => 'Hello World', 'github.com' => ['foo' => 'bar'], 'forge.laravel.com' =>
12 Best PHP Chat Scripts on CodeCanyonMar 13, 2025 pm 12:08 PMDo you want to provide real-time, instant solutions to your customers' most pressing problems? Live chat lets you have real-time conversations with customers and resolve their problems instantly. It allows you to provide faster service to your custom
Explain the concept of late static binding in PHP.Mar 21, 2025 pm 01:33 PMArticle discusses late static binding (LSB) in PHP, introduced in PHP 5.3, allowing runtime resolution of static method calls for more flexible inheritance.Main issue: LSB vs. traditional polymorphism; LSB's practical applications and potential perfo
Customizing/Extending Frameworks: How to add custom functionality.Mar 28, 2025 pm 05:12 PMThe article discusses adding custom functionality to frameworks, focusing on understanding architecture, identifying extension points, and best practices for integration and debugging.
Alipay PHP SDK transfer error: How to solve the problem of 'Cannot declare class SignData'?Apr 01, 2025 am 07:21 AMAlipay PHP...
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
Dreamweaver CS6
Visual web development tools
WebStorm Mac version
Useful JavaScript development tools
