Js+php实现异步拖拽上传文件
异步拖拽上传文件--小实例
upload.html
<!DOCTYPEhtml>
<!--
Tochangethislicenseheader,chooseLicenseHeadersinProjectProperties.
Tochangethistemplatefile,chooseTools|Templates
andopenthetemplateintheeditor.
-->
<html>
<head>
<title>TODOsupplyatitle</title>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<style>
#box{
width:150px;height:150px;border:1pxsolidred;
}
</style>
<scripttype="text/javascript"src="XMLhttpReuest.js"></script>
<script>
window.onload=function(){
varbox=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();
varfile=e.dataTransfer.files[0];
varformData=newFormData();
formData.append('aa',file);
varxml=ajaxFunction();
xml.open("post",'./upload.php',true);
xml.send(formData);
xml.onreadystatechange=function(){
if(xml.readyState==4&&xml.status==200){
varflag=xml.responseText;
console.log(flag);
if(flag==1){
//box.innerHTML="上传成功";
alert('上传成功');
}
}
}
}
}
</script>
</head>
<body>
<divid="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
functionajaxFunction()
{
varxmlHttp;
try
{
//Firefox,Opera8.0+,Safari
xmlHttp=newXMLHttpRequest();
}
catch(e)
{
//InternetExplorer
try
{
xmlHttp=newActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
alert("您的浏览器不支持AJAX！");
returnfalse;
}
}
}
returnxmlHttp;
}
以上所述就是本文的全部内容了，希望大家能够喜欢。