Js+php implements asynchronous drag and drop upload files-PHP开发-php.cn

Home

php教程

PHP开发

Js+php implements asynchronous drag and drop upload files

高洛峰

Dec 30, 2016 pm 01:19 PM

Asynchronous drag and drop upload file--small example

upload.html

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
  <head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      #box{
        width:150px;height: 150px;border: 1px solid red;
      }
    </style>
    <script type="text/javascript" src="XMLhttpReuest.js"></script>
    <script>
      window.onload = function () {
        var box = document.getElementById(&#39;box&#39;);
        box.ondragenter = function (e) {
          e.preventDefault();
        }
        box.ondragover = function (e) {
          e.preventDefault();
        }
        box.ondragleave = function (e) {
          e.preventDefault();
        }
        box.ondrop = function (e) {
          e.preventDefault();
          var file = e.dataTransfer.files[0];
          var formData = new FormData();
          formData.append(&#39;aa&#39;, file);
  
          var xml = ajaxFunction();
          xml.open("post", &#39;./upload.php&#39;, true);
          xml.send(formData);
          xml.onreadystatechange = function () {
            if (xml.readyState == 4 && xml.status == 200) {
              var flag = xml.responseText;
              console.log(flag);
              if (flag == 1) {
//                box.innerHTML="上传成功";
                alert(&#39;上传成功&#39;);
              }
            }
          }
        }
  
  
      }
    </script>
  </head>
  <body>
    <div id="box">
      请拖入上传的文件
    </div>
  </body>
</html>

Copy after login

upload.php

<?php
header("Content-Type:text/html;charset=UTF-8");
if(is_uploaded_file($_FILES[&#39;aa&#39;][&#39;tmp_name&#39;])){
    move_uploaded_file($_FILES[&#39;aa&#39;][&#39;tmp_name&#39;], "./".iconv("UTF-8", "GBK", $_FILES[&#39;aa&#39;][&#39;name&#39;]));
    echo &#39;1&#39;;
}

Copy after login

XMLhttpReuest.js

function ajaxFunction()
 {
 var xmlHttp;
 try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
 catch (e)
  {
 // Internet Explorer
  try
   {
   xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
   }
  catch (e)
   {
   try
     {
     xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
     }
   catch (e)
     {
     alert("您的浏览器不支持AJAX！");
     return false;
     }
   }
  }
  return xmlHttp;
}

Copy after login

All of the above That’s the entire content of this article, I hope you all like it.

For more articles related to Js+php implementing asynchronous drag-and-drop uploading files, please pay attention to the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn