suchen

Heim >Web-Frontend >js-Tutorial >Implementieren Sie Ajax Drag & Drop zum Hochladen von Dateien (mit Code)

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

亚连
亚连Original
2018-05-21 15:44:101536Durchsuche

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>

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

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jQuery Ajax implementiert die Datei-Upload-Funktion (mit Code)Nächster Artikel：jQuery Ajax implementiert die Datei-Upload-Funktion (mit Code)

In Verbindung stehende Artikel

Mehr sehen