Home >Web Front-end >JS Tutorial >Implement ajax drag and drop to upload files (with code)
This article mainly teaches you how to simply implement ajax drag and drop upload files, which has certain reference value. Interested friends can refer to
AJAX drag and drop upload function implementation for your reference. The specific content is as follows
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box { width: 300px; height: 300px; border: 1px solid #000; text-align: center; line-height: 300px; font-size: 40px; } </style> </head> <body> <p class="box">+</p> <script> var box = document.querySelector('.box'); box.ondragover = function (e) { e.preventDefault(); } box.ondrop = function (e) { console.log(e.dataTransfer) e.preventDefault(); var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responseText) } } xhr.open('POST', './server.php', true); var formdata = new FormData(); formdata.append('pic', e.dataTransfer.files[0]); formdata.append('name', 'luyao'); xhr.send(formdata); } </script> </body> </html>
//server.php
<?php $rand = rand(1,1000).'.jpg'; move_uploaded_file($_FILES['pic']['tmp_name'], './uploads/'.$rand); echo '/uploads/'.$rand;
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
PHP AJAX How to implement the voting function
How PHP gets the headers in ajax (Case)
The above is the detailed content of Implement ajax drag and drop to upload files (with code). For more information, please follow other related articles on the PHP Chinese website!