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

HTML5文件上传还有进度条

2013-06-18 20:54 176 查看
以下是自学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';


如图所示：

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