第十二章：第47节JavaScript页面无刷新交互——ajax 上传大附件显示进度条
更新于：2021-05-10 21:33:07
正常来说，特别大的文件不使用http协议传输的，它不支持断点续传。比如说像优酷，上传视频都有特定的软件，当然优酷也可以在网页中上传视频，并显示上传的进度条。学完FormData对象我们也可以做这样的特效了。
显示进度条算法：
上传大文件显示进度条的核心需要依靠一个事件属性：ajax对象.upload.onprogress。
onprogress事件对象下有两个属性值：loaded和total。
Math.floor((loaded/total)*100)就可以求出上传进度的百分比。
写代码前准备：
第四章39节我们介绍过，在PHP配置文件中有对上传文件大小做限制的参数。所以，上传大文件前先要改下这些参数值。
注意: post_max_size,upload_max_filesize用下面的方法是修改不了的.
ini_set('post_max_size','1024M');
ini_set('upload_max_filesize','1024M');
正确做法是用.htaccess文件:
<IfModule mod_php5.c>
php_value upload_max_filesize 2000M
php_value post_max_size 2000M
php_value max_file_uploads 50
</IfModule>
或者直接去PHP配置文件中修改。
代码开始：
PHP代码不贴了，只贴出前端代码。
进度条的实现依靠JS去修改HTML元素的CSS属性。
代码很简单。
特别注意：
ajax由于浏览器的限制，禁止跨域请求！
什么意思呢？
就是www.phpnanshen.com下的页面ajax只能请求本域名下的URL，不能请求其他域名下的URL。
网上有很多开放的免费接口，返回值很多是json字符串，比如查询ip地址的接口。自己的网站直接用ajax去请求是不成功的。
要注意这点，如果有类似的需求，就要用其他方法实现。比如先用PHP的curl获取，再通过ajax传给页面。或者去搜索了解下“jsonp”。
提前说明：
有关ajax的知识到此结束，ajax在编程中是很常用很重要。除了前面的几个例子，比如现在流行的手机APP扫码登录网站，都离不开页面无刷新技术。
上图是淘宝的扫码登录，在“Network”中可看到页面一直在向服务器做无刷新请求。
学会了这几节内容，是可以胜任大部分ajax工作的。
后面我们学习jQuery框架，还会学到ajax。因为大家普遍都不使用原生的JS代码了，jQuery框架是JS最火的一门框架，它也重写了ajax。以后写无刷新功能可能是用jQuery的ajax写法比较多。
推荐：
大家有兴趣的话，尝试用ajax写一个网页版的聊天室，把前面学过的PHP、mysql、DOM、ajax知识结合起来做个大复习。
有关页面无刷新技术，目前有门新的技术正在替代ajax技术——HTML5的WebSocket。
什么是WebSocket API?
WebSocket API是下一代客户端-服务器的异步通信方法。该通信取代了单个的TCP套接字，使用ws或wss协议，可用于任意的客户端和服务器程序。WebSocket目前由W3C进行标准化。WebSocket已经受到Firefox 4、Chrome 4、Opera 10.70以及Safari 5等浏览器的支持。
WebSocket API最伟大之处在于服务器和客户端可以在给定的时间范围内的任意时刻，相互推送信息。WebSocket并不限于以Ajax(或XHR)方式通信，因为Ajax技术需要客户端发起请求，而WebSocket服务器和客户端可以彼此相互推送信息；XHR受到域的限制，而WebSocket允许跨域通信。
Ajax技术很聪明的一点是没有设计要使用的方式。WebSocket为指定目标创建，用于双向推送消息。
楠神目前也没有使用过WebSocket，服务端PHP要以网络编程的方式与前端进行交互，不是现在CGI编程方式了。有兴趣大家多去网上了解吧。