Implementieren Sie Ajax Drag & Drop zum Hochladen von Dateien (mit Code)-js-Tutorial-php.cn

Implementieren Sie Ajax Drag & Drop zum Hochladen von Dateien (mit Code)

亚连

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

Original

1435 Leute haben es durchsucht

In diesem Artikel erfahren Sie hauptsächlich, wie Sie AJAX-Drag-and-Drop-Upload-Dateien einfach implementieren. Interessierte Freunde können sich als Referenz auf die Implementierung der AJAX-Drag-and-Drop-Upload-Funktion beziehen lautet wie folgt:

<!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>

Nach dem Login kopieren

//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;

Nach dem Login kopieren

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

PHP+AJAX So implementieren Sie die Abstimmungsfunktion

Wie erhält PHP den Ajax in

ajax Header (Fall)

Detaillierte Erläuterung der Schritte zur Implementierung der Funktion zum Hinzufügen von Kategorien zu Blogbeiträgen mit PHP+Ajax

Das obige ist der detaillierte Inhalt vonImplementieren Sie Ajax Drag & Drop zum Hochladen von Dateien (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!