关闭

利用html5的FormData对象和ajax实现异步文件上传

标签: xmlhttprequestphpajaxhtml5
1551人阅读 评论(1) 收藏 举报
分类:
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>';
    }
}






?>


   
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:71810次
    • 积分:1313
    • 等级:
    • 排名:千里之外
    • 原创:61篇
    • 转载:10篇
    • 译文:0篇
    • 评论:7条