Implement ajax drag and drop to upload files (with code)-JS Tutorial-php.cn

Implement ajax drag and drop to upload files (with code)

亚连

Release： 2018-05-21 15:44:10

Original

1493 people have browsed it

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(&#39;.box&#39;);

 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(&#39;POST&#39;, &#39;./server.php&#39;, true);

  var formdata = new FormData();
  formdata.append(&#39;pic&#39;, e.dataTransfer.files[0]);
  formdata.append(&#39;name&#39;, &#39;luyao&#39;);
  xhr.send(formdata);

 }
 </script>
</body>

</html>

Copy after login

//server.php

<?php
 $rand = rand(1,1000).&#39;.jpg&#39;;
 move_uploaded_file($_FILES[&#39;pic&#39;][&#39;tmp_name&#39;], &#39;./uploads/&#39;.$rand);
 echo &#39;/uploads/&#39;.$rand;

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

PHP AJAX How to implement the voting function

How PHP gets the headers in ajax (Case)

Detailed explanation of the steps to implement the function of adding categories to blog posts using PHP Ajax

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!