上传功能是工作中经常会遇到的问题,应该作为开发标配的技能每个人都会。
我选用的是Uploadify 3.1.2进行上传,使用方法参考之前的一篇文章, 今天记录下一个我遇到的很神奇的bug
chrome为何频繁崩溃(crash)
网上找了一下解决办法,大多都是在uploadify.js后面加上一个随机时间以防止使用chrome的缓存,其实这个办法并不能完全解决崩溃问题,比如在uplodify页面进入其他页页后,再点击后退返回到这个uploadify页面,同样会出现崩溃问题。
其实如果不用缓存每次去请求服务器其实是个很浪费的事,关键是这样做根本就没有解决这个问题。真正的解决的办法也很简单,就是用setTimeout,让uplodify的初始化和浏览器缓存模块的功能不要在同时进行,操作如下:
1
2
3
4
5
6
7
8
9
10
11
|
$(
function
(){
setTimeout(
function
(){
$(
'#file_upload'
).uploadify({
'swf'
:
'tools/uploadify/uploadify.swf'
,
'uploader'
:
'upload.php'
,
'onUploadSuccess'
:
function
(file, data, response) {
}
});
},10);
});
|
这样即可解决启动时/后退时崩溃问题。
下面做解释:
本地开发环境一切正常, 但是上线后Chrome却频繁crash,IE、Firefox等浏览器都没有问题,google的建议删除自己的default目录,觉得不靠谱没有尝试。
一开始搞不懂为什么会出现这种情况,通过Google查资料,发现是浏览器缓存造成的:Chrome浏览器为了提高用户访问同一页面的速度,会对页面数据进行缓存,当(Javascript文件)url请求地址不变时会导致浏览器不发送请求,直接从缓存中读取之前的数据,可能uploadify.js文件走了缓存,导致某个变量为null导致chrome崩溃
从LOG里也能看到:
正常的情况下,会请求文件(jquery.uploadify.min.js);而崩溃的情况下,则没请求它。
1、添加代码,禁止缓存
JAVA代码:
- response.setHeader("Pragma","no-cache"); //HTTP 1.0
- response.setHeader("Cache-Control","no-cache"); //HTTP 1.1
- response.setDateHeader ("Expires", 0); //prevents caching at the proxy server
- <HEAD>
- <%
- response.setHeader("Pragrma","no-cache");
- response.setHeader("Cache-Control","no-store");
- response.setDateHeader("Expires",0);%>
- </HEAD>
- <HEAD>
- <meta HTTP-EQUIV="pragma" CONTENT="no-cache">
- <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
- <meta HTTP-EQUIV="expires" CONTENT="0">
- </HEAD>
- <HEAD>
- <script type="text/javascript"
- src="js/jquery.uploadify.min.js?r=<%=new Random().nextInt()%>"></script>
- </HEAD>