前端屌丝

导航

html5新特性:异步上传文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>html5文件上传</title>
</head>
<body>

<input type="file" name="file" id="file" />
<br/>
<input type="submit" value="提交" id="submit" />

<script>
    var fileinput=document.getElementById('file');
    var btn=document.getElementById('submit');

    btn.onclick=function(){
        var file=fileinput.files[0];
        var formdata=new FormData();
        formdata.append('file',file);
        var xhr=new XMLHttpRequest();
        xhr.open("POST",'upload.php',true);
        xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");

        xhr.upload.addEventListener("progress",function(e){
            document.title= e.loaded/ e.total;
        },false)

        xhr.addEventListener("load", function(e){
            alert(e.target.responseText);
        }, false);

        xhr.onreadystatechange=function(){
            console.log(xhr.readyState)
        }
        xhr.send(formdata)
    }
</script>
</body>
</html>

  

posted on 2013-10-17 10:08  前端屌丝  阅读(292)  评论(0编辑  收藏  举报