Maison >interface Web >js tutoriel >Implémenter le glisser-déposer ajax pour télécharger des fichiers (avec code)

Implémenter le glisser-déposer ajax pour télécharger des fichiers (avec code)

亚连original: 2018-05-21 15:44:101535parcourir

Cet article vous apprend principalement comment implémenter simplement des fichiers de téléchargement par glisser-déposer AJAX, qui ont une certaine valeur de référence. Les amis intéressés peuvent se référer à

Implémentation de la fonction de téléchargement par glisser-déposer AJAX pour votre référence. est le suivant

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

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

PHP+AJAX Comment implémenter la fonction de vote

Comment PHP obtient-il l'ajax dans ajax en-têtes (cas)

Explication détaillée des étapes pour implémenter la fonction d'ajout de catégories aux articles de blog avec PHP+Ajax

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：jquery ajax implémente la fonction de téléchargement de fichiers (avec code)Article suivant：jquery ajax implémente la fonction de téléchargement de fichiers (avec code)

Articles Liés

Voir plus