HTML5文件上传还有进度条

 

    以下是自学it网--中级班上课笔记

            网址:www.zixue.it

 

需要在chrome,ff,IE10下运行

html页面

 

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<title>HTML5 文件上传进度条</title>

<meta charset="utf-8" />

<meta name="description" content="" />

<meta name="keywords" content="" />

<script type="text/javascript">

/*

想得到传送文件的进度条

1:要能把文件内容打包并发送  FormData对象

2: 发送过程中,要能不断检测 已发送/全部 progress.onprogress

*/



</script>

<style type="text/css">

#progress{

border: 1px solid blue;

width:500px;

height:20px;

}



#bar {

background:green;

height:20px;

width:0%;

}



</style>

</head>

    <body>

        <h1>在chrome,ff,IE10运行</h1>

        <form>

            <input type="file" name="pic" /><br />

        </form>

        <div id="progress"><div id="bar"></div></div>

    </body>

    <script>

        // 负责ajax发送数据

        function up(fd) {

            var xhr = new XMLHttpRequest();

            xhr.open('POST','upfile.php',true); // 异步传输



            // xhr.upload 这是html5新增的api,储存了上传过程中的信息

            xhr.upload.onprogress = function (ev) {

                var percent = 0;

                if(ev.lengthComputable) {

                    percent = 100 * ev.loaded/ev.total;

                    //document.getElementById('progress').innerHTML = percent;

                    document.getElementById('bar').style.width = percent + '%';

                }

            }



            xhr.send(fd);

        }





        document.getElementsByTagName('input')[0].onchange = function() {

            //alert('你选择文件了');

            //alert(this.files[0]); // 文件对象,html5新增的api



            var fd = new FormData(); // html5新增的对象,可以包装字符,二进制信息

            fd.append(this.name,this.files[0]);



            up(fd);



        }

    </script>

</html>


upfile.php页面

 

 

echo move_uploaded_file($_FILES['pic']['tmp_name'],'./upload/' . $_FILES['pic']['name']) ? 'OK':'fail';


如图所示:

HTML5文件上传还有进度条

 

 

你可能感兴趣的:(html5)