您的位置：首页 > Web前端 > HTML5

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

2013-12-03 19:15 841 查看 
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>';
    }
}

?>



                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                xmlhttprequest
                                                php
                                                ajax
                                                html5
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航