遮罩

为了防止上传文件的过程中用户的其他操作，可以利用简单的div遮罩锁住页面，当后台处理完上传操作之后自动转到其他页面。

＃遮罩层的CSS样式

<style type="text/css">
*{padding:0;margin:0}
.pop1{z-index:1;background-color:#CCCCCC;opacity:0.5;width:100%;height:100%;position:absolute;left:0px;top:0px;display:none}
.pop2{z-index:2;background-color:white;position:absolute;left:40%;top:40%;width:300px;height:100px;display:none}
</style> 
'''注：透明效果'''
   opacity:0.5 其透明度在0-1间取值 0为全透明 ，只适用于Firefox 3.5之后的版本
   -moz-opacity:.5;  透明值 ,0--1 之间，适用于Firefox 3.5之前的版本
   filter: Alpha(opacity=50); 其透明度在0－100间取值 0为全透明 只使用于IE
   如果需要全部兼容，那就都写上就OK了

＃开启遮罩事件

 <script type="text/javascript"> 
function show(o1,o2)
{ var o1 = document.getElementById(o1); 
var o2 = document.getElementById(o2); 
o1.style.width = document.documentElement.scrollWidth; 
o1.style.height = document.documentElement.scrollHeight; 
o1.style.display = "block"; 
o2.style.display = "block"; } 
</script> ^M

＃页面

<body id="" style="width:100%;height:100%" onload="lod()">
<div id="pop1" class="pop1"> </div>
<div id="pop2" class="pop2" ><br><br><h2>文件正在上传........</h2> </div>
......
<input type="file" id="my_file" name="my_file"  value=""/>
.......
<button type="submit" onclick="show('pop1' ,'pop2')" class="switch_bn">上传</button>
.......
</body>

注：

这样的上传效果只是伪上传进度，如果在django框架下实现实时显示真正的上传进度，可参考：

 http://djangosnippets.org/snippets/679/  http://djangosnippets.org/snippets/678/

posted @ 2013-04-02 14:01  编缘  阅读(112)  评论(0)    收藏  举报