利用html5的FormData对象和ajax实现异步文件上传
来源：互联网 发布：php开发网站实例 编辑：程序博客网 时间：2024/05/16 12:18
js部分:
<!doctype html><html><head><meta charset='utf-8'/><title>html5拖拽+ajax异步文件上传</title></head><style>#box{ width:100px; height:100px; border:1px solid green; line-height:50px; text-align:center;} </style><script>window.onload=function(){ var box=document.getElementById('box'); box.ondragenter=function(ev){ this.innerHTML="<font color=red>请放下</font>"; ev.preventDefault(); }; box.ondragover=function(ev){ this.innerHTML="<font color=red>请放下</font>"; ev.preventDefault(); }; box.ondragleave=function(ev){ this.innerHTML="<font color=red>请拖入要上传的文件!</font>"; ev.preventDefault(); }; box.ondrop=function(ev){ var up_file=ev.dataTransfer.files[0]; var form_data=new FormData(); //append的第一个参数lpprince是后台接受的文件名,相当于input 的name属性的值 form_data.append('lpprince',up_file); //创建XMLHttpRequest对象 var xml=new XMLHttpRequest(); xml.open('post','do_up.php'); xml.onreadystatechange=function(){ if(xml.readyState==4&& xml.status==200){ box.innerHTML=xml.responseText; } } xml.send(form_data); ev.preventDefault(); };}</script><body><div id='box'><font color=red>请拖入要上传的文件!</font></div></body></html>PHP部分:
<?php$file=$_FILES['lpprince'];if( is_uploaded_file($file['tmp_name']) ){ if(!file_exists('./imgs')){ mkdir('./imgs'); } $is_ok=move_uploaded_file($file['tmp_name'],'./imgs/'.date("Y-m-d H:i:s").$file['name']); if($is_ok){ echo '<font color="red">上传成功!</font>'; }else{ echo '<font color="red">上传失败!</font>'; }}?>
