A lot of functions have been implemented on the HTML5 PC, and drag and drop uploading is also used in the work. I specially recorded this function
Trigger events (source elements) on the drag target:
ondragstart - Triggered when the user starts dragging the element
ondrag - Triggered when the element is being dragged
ondragend - Triggered after the user completes dragging the element
Triggered when the target is released Events:
ondragenter - This event is triggered when the object being dragged by the mouse enters the scope of its container
ondragover - When a dragged object is dragged within the scope of another object's container This event is triggered when moving
ondragleave - This event is triggered when the object being dragged by the mouse leaves the scope of its container
ondrop - This event is triggered when the mouse button is released during a dragging process
上码
<html>
<head>
<meta charset="UTF-8">
<title>拖拽</title>
<style>
.box{width:800px;height:600px;float:left;}
#box1{background-color:#ccc;}
#box2{background-color:#000;}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<img src="/static/imghwm/default1.png" data-src="1.jpg" class="lazy" id="img1" alt="HTML5 js implements drag-and-drop file upload function" >
<div id="msg"></div>
</body>
<script>
var box1Div,box2Div,msgDiv,img1;
window.onload = function(){
box1Div = document.getElementById('box1');
box2Div = document.getElementById('box2');
msgDiv = document.getElementById('msg');
img1 = document.getElementById('img1');
box1Div.ondragover = function(e){e.preventDefault();}
box2Div.ondragover = function(e){e.preventDefault();}
img1.ondragstart = function(e){e.dataTransfer.setData('imgId','img1');}
box1Div.ondrop = dropImghandler;
box2Div.ondrop = dropImghandler;
}
function dropImghandler(e){
showObj(e);//获取拖放所有信息
showObj(e.dataTransfer);//获取文件
e.preventDefault();
var img = document.getElementById(e.dataTransfer.getData('imgId'));
e.target.appendChild(img);
}
function showObj(obj){
var s = '';
for(var k in obj){s += k+":"+obj[k]+"<br/>";}
msgDiv.innerHTML = s;
}
</script>
</html>This function is a method for dragging images into the left and right divs. I don’t think it is useful. It can be used as Harbin Beer
The following is the drag and drop upload code, which is obtained by back-end PHP After getting to $_FILES, you can start it
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>拖放上传</title>
<style>
#imgContainer{background:#ccc;width:500px;height:500px;}
</style>
</head>
<body>
<div id="imgContainer"></div>
<div id="msg"></div>
</body>
<script>
var imgContainer,msgDiv;
window.onload = function(e){
imgContainer = document.getElementById('imgContainer');
msgDiv = document.getElementById('msg');
imgContainer.ondragover = function(e){
e.preventDefault();
}
imgContainer.ondrop = function(e){
e.preventDefault();
var f = e.dataTransfer.files[0];
//这时已经获取到文件了，具体想要用第几个文件自己处理，发post请求后端处理就行了！
//下面是图片获取到之后显示在imgContainer中的流程
// var fileReader = new FileReader();
// fileReader.onload=function(){
// imgContainer.innerHTML = "<img src=\""+fileReader.result+"\" alt="HTML5 js implements drag-and-drop file upload function" >"
// }
// fileReader.readAsDataURL(f);
// showObj(e); //显示上传信息
// showObj(e.dataTransfer.files);
}
}
function showObj(obj){
var s = '';
for(var k in obj){s += k+":"+obj[k]+"<br/>";}
msgDiv.innerHTML = s;
}
</script>
</html>The above is the entire content of this article. I hope it will be helpful to everyone's learning, and I also hope that everyone will support the PHP Chinese website.
For more articles related to HTML5 js implementation of drag-and-drop file upload function, please pay attention to the PHP Chinese website!
How to Add Audio to My HTML5 Website?Mar 10, 2025 pm 03:01 PMThis article explains how to embed audio in HTML5 using the <audio> element, including best practices for format selection (MP3, Ogg Vorbis), file optimization, and JavaScript control for playback. It emphasizes using multiple audio f
How do I use the HTML5 Page Visibility API to detect when a page is visible?Mar 13, 2025 pm 07:51 PMThe article discusses using the HTML5 Page Visibility API to detect page visibility, improve user experience, and optimize resource usage. Key aspects include pausing media, reducing CPU load, and managing analytics based on visibility changes.
How to Create Interactive Games with HTML5 and JavaScript?Mar 10, 2025 pm 06:34 PMThis article details creating interactive HTML5 games using JavaScript. It covers game design, HTML structure, CSS styling, JavaScript logic (including event handling and animation), and audio integration. Essential JavaScript libraries (Phaser, Pi
How do I use viewport meta tags to control page scaling on mobile devices?Mar 13, 2025 pm 08:00 PMThe article discusses using viewport meta tags to control page scaling on mobile devices, focusing on settings like width and initial-scale for optimal responsiveness and performance.Character count: 159
How do I handle user location privacy and permissions with the Geolocation API?Mar 18, 2025 pm 02:16 PMThe article discusses managing user location privacy and permissions using the Geolocation API, emphasizing best practices for requesting permissions, ensuring data security, and complying with privacy laws.
How to Use HTML5 Forms for User Input?Mar 10, 2025 pm 02:59 PMThis article explains how to create and validate HTML5 forms. It details the <form> element, input types (text, email, number, etc.), and attributes (required, pattern, min, max). The advantages of HTML5 forms over older methods, incl
How do I use the HTML5 Notifications API to display desktop notifications?Mar 13, 2025 pm 07:57 PMThe article explains how to use the HTML5 Notifications API to display desktop notifications, focusing on permission requirements, customization, and browser support.
How do I use the HTML5 Drag and Drop API for interactive user interfaces?Mar 18, 2025 pm 02:17 PMThe article explains how to use the HTML5 Drag and Drop API to create interactive user interfaces, detailing steps to make elements draggable, handle key events, and enhance user experience with custom feedback. It also discusses common pitfalls to a
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 Chinese version
Chinese version, very easy to use
SublimeText3 Mac version
God-level code editing software (SublimeText3)
MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.
Dreamweaver CS6
Visual web development tools
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
