Ajax实现文件进度条效果
ajax文件上传：
很多时候，上传文件都只是一个小页面中的一个功能，要求在实现文件上传的前提下不刷新页面。而一般情况下将客户端的文件包装成网络地址传递到服务器端然后通过流来进行文件传输的任务都是使用浏览器来帮我们完成的，而且似乎我们非常难以插手进去。对于普通的form字段，我们可以手动拿到其中的值，然后封装成一个请求数据传输的对象，然后发出ajax请求，就可以将我们客户端的数据传递到后台去。但是file控件却不行，为了安全着想，js是不允许访问客户端的文件系统的（某些比较具有影响力的公司可能会开发出浏览器的插件，使得可以访问客户端的文件系统）。所以我们无法拿到文件控件的数据，所以具体的传输操作还要请求浏览器来帮我们完成。所以为了实现ajax来上传文件的效果，是有一些困难的，所以人们就想到了一种折衷的方案，就是在页面中的一个小区域中添加一个iframe对象，然后引用到另外一个页面中，然后再我们上传文件的时候只需要提交该页面即可，并不会导致主页面提交，这样就模拟出了一种ajax上传文件的方式。
ajax进度条：
想要实现进度条效果，也许比实现仿ajax文件上传要来的更麻烦。在网上有很多ajax进度条的源码，实现的方式也是各种各样，良莠不齐。其中更有很多的实现方式虽然展现出了进度条的效果，但是却和文件上传的进度没有一点的关系。我还看见过一个这样的例子，在一个页面中添加了一个file控件和一个submit控件。然后在下面有一个table用来实现进度条的效果。在点击提交的时候他会触发一个onclick事件，在这个事件里面他采用了定时器一点点的用颜色去填充table中的进度条。当进度条填充完毕了之后（也就是意味着文件上传完成），然后提交form，在进度条上展示已经上传完成，可是真正的上传才随着页面的提交刚刚开始。
php文件
<?php
echo move_uploaded_file($_FILES['pic']['tmp_name'],'./'.$_FILES['pic']['name'])?'ok':'on';
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div style="width: 600px;height: 10px;border: 1px solid blue">
<div id="prog" style="height: 100%;width: 0%;background: blue;"></div>
</div><h2 id="ff"></h2>
<form action="" method="post" enctype="multipart/form-data">
<p><input type="file" name="pic" ></p>
<p><input type="submit" value="上传"></p>
</form>
</body>
</html>
<script type="text/javascript">
var fom = document.getElementsByTagName('form')[0];
fom.onsubmit = function(){
var fmdata = new FormData(this);//formdata会把表单中的所有数据,整体打包
//console.log(fmdata);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(this.readyState == 4){
alert(this.responseText);
}
}
xhr.upload.onprogress = function(ev){
//console.log(ev);
var jd = 100*ev.loaded/ev.total;
document.getElementById('prog').style.width = jd+'%';
document.getElementById('ff').innerHTML = Math.ceil(jd)+'%';
}
xhr.open('post','12_1.php',true);
xhr.send(fmdata);
return false;
}
</script>
总结
想要实现这个功能不难，只需要明白其中的Ajax原理。
明白进度条的颜色填充与哪个有关；
掌握一定的js基础。
下面是运行结果图
未上传之前
上传完成
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
