Js+php实现异步拖拽上传文件

异步拖拽上传文件--小实例
upload.html

<！DOCTYPE html><！--To change this license header, choose License Headers in Project Properties.To change this template file, choose Tools | Templatesand 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（"box"）;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（"aa", file）; var xml = ajaxFunction（）;xml.open（"post", "./upload.php", 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（"上传成功"）;}}}}}</script></head><body><div id="box">请拖入上传的文件</div></body></html>

upload.php
复制代码代码如下:
<?php
header（"Content-Type:text/html;charset=UTF-8"）;
if（is_uploaded_file（$_FILES["aa"]["tmp_name"]））{
move_uploaded_file（$_FILES["aa"]["tmp_name"], "./".iconv（"UTF-8", "GBK", $_FILES["aa"]["name"]））;
echo "1";
}

XMLhttpReuest.js

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

以上所述就是本文的全部内容了，希望大家能够喜欢。