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; }
以上所述就是本文的全部内容了,希望大家能够喜欢。