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

ajax--上传进度条

2016-01-27 09:24 615 查看
选择文件后就上传，并有进度条显示上传进度

<style type="text/css">
#big{
width: 500px;
height: 30px;
border: 1px solid grey;
}
#sm{
width: 0%;
height: 30px;
background: grey;
}
</style>

</head>
<body>
<div id="big">
<div id="sm"></div>
</div>
<input type="file" name="pic" onchange="upload()">
</body>

bigdiv是进度条的外框

smalldiv是内部行走的进度条

<script type="text/javascript">
function upload(){
var pic=document.getElementsByName('pic')[0].files[0];
var fd = new FormData();
fd.append('file',pic);
var xhr=new XMLHttpRequest();
xhr.open('POST','8file.php',true);
/*进度条需要2个最基础的信息
总大小 已上传大小

html5
有上传过程事件 onprogress
能读到这两个

在send之前
利用xhr2新标准 为上传过程写一个监听函数
*/

xhr.upload.onprogress = function(ev){
if(ev.lengthComputable){
var percent = 100*ev.loaded/ev.total;
// console.log(percent);
// 进度条div的长度随percent增加而增加
document.getElementById('sm').style.width=percent + '%';
document.getElementById('sm').innerHTML = percent + '%';
}
}
// 发送
xhr.send(fd);

}

</script>


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  php ajax html5 javascript
相关文章推荐
新的分享
章节导航