加载中...

上传文件小实例 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>上传文件TEST</title>
<style>
.demo{ width:50%; margin:120px auto;}
</style>
</head>

<body>
<div class="demo">
    
    <!--添加滚动条标签，html5新增-->
    <progress max="100" value="0"></progress>
    
    <!--表示类型为文件上传，multiple(html5新增加)表示多个文件，默认单个-->
    <input type="file" class="tempFile" multiple="multiple"/> 
    <button onClick="ajaxSubmit()">提交</button>
</div>
    <script>
        function ajaxSubmit(){
            var files =document.querySelector('.tempFile').files;
            //因为不确定有多少个文件，所以我们使用循环遍历的方式将文件都传递给FormData
            var formdata =new FormData();
            for(var i=0;i<files.length;i++){
                var file = files[i];
                formdata.append('myflie'+i,file);
            }
            //发送ajax请求
            var xhr =new XMLHttpRequest();
            xhr.onreadystatechange = function(){
                if(xhr.readyState==4){
                    if(xhr.status==200){
                        console.log(xhr.responseText);
                    }
                }
            }
            
            //获得进度条
            var progressBar = document.querySelector("progress");
            //上传回调的进度回调，上传进度只有有变化，本函数就会自动执行
            xhr.upload.onprogress =function(eve){
                //eve.lengthComputable
                //表示文件是否已经上传100%，默认是true,表示没有100%
                //上传100%后变成false
                if(eve.lengthComputable){
                    //eve.loaded 表示已经上传的
                    //eve.total 表示总数
                    progressBar.value =(eve.loaded/eve.total)*100;
                }
            }
            //准备发送
            xhr.open('post','receive.php',true);
            xhr.send(formdata);
        }
    </script>
</body>
</html>

 

posted @ 2019-01-21 21:05  royal6  阅读(263)  评论(0)    收藏  举报