分类: HTML

简单的异步上传文件操作

没有评论

2011 年 07 月 25 日 at 下午 10:36分类:HTML | PHP

1、在页面中间有一个简单的<form…表单,表单只包含了<input type=”file” … >控件。这个表单的目标链接就是一个隐藏得IFRAME(通过 CSS的风格” display: none;”实现)并且表单里面唯一一个控件的OnChange事件用来触发JavaScript函数。这个函数的作用是检查用户提交的扩展名,然后提交表单。
2、在服务器端用PHP编写了一个处理过程(用FILEFRAME坐注释了)。这个处理过程用来把从客户端上传的文件进行检查后保存在服务器,并且通过Javascript代码的形式返回给用户。返回给用户的Javascript脚本通过”parent.window.document”更改了用户现在正在查看的页面,设置了文件的名称并启用了让用户提交表单的按钮。启用按钮的操作是通过getElementById函数实现的。
3、 在主页面还有一个表单,它包含了用户提交的描述和隐藏的文件名。用户可以在文件上传的同时填写文件的描述。当文件上传结束以后,用户点击按钮,就可以看上传以后返回给用户的文件信息了。(通过返回来的文件名和用户输入的描述构成文件信息)。例子如下: 
HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en_US" xml:lang="en_US">
<head>
  <title>图片异步上传</title>
</head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link type="text/css" rel="stylesheet" href="css/index.css">
<body>
 <div class="frm">
  <form name="uploadFrom" id="uploadFrom" action="upload.php" method="post"  TARGET='TARFRAME' enctype="multipart/form-data">
   <input type="file" id="upload_file" name="upfile">
  </form>
  <iframe src=""  width="0" height="0" style="display:none;" NAME="TARFRAME"></iframe>
 </div>
 <div id="msg">
 </div>
</body>
</html>

index.js:

$(function(){
 $("#upload_file").change(function(){
   $("#uploadFrom").submit();
 });
});

function stopSend(str){
 var im="<img src='upload/images/"+str+"'>";
 $("#msg").append(im);
}}

upload.php:

<?php
 $file=$_FILES['upfile'];
 $name=rand(0,500000).dechex(rand(0,10000)).".jpg";
 move_uploaded_file($file['tmp_name'],"upload/images/".$name);
//调用iframe父窗口的js 函数
  echo "<script>window.parent.stopSend('$name')</script>";

判断滚动条到底部代码

一条评论

2011 年 06 月 23 日 at 上午 7:41分类:HTML | JavaScript | jQuery

废话不说,看代码:


    $(function(){
	$(window).scroll(function(){
		var bodyTop = document.documentElement.scrollTop + document.body.scrollTop;
                //当滚动条滚到一定距离时,执行代码
		if(bodyTop>10){
			alert(bodyTop);
		}
                //===============================================
		//滚动到底部时出发函数
		//滚动的当前位置+窗口的高度 >= 整个body的高度
		if(bodyTop+$(window).height() >= $(document.body).height()){
			alert('adqfadqs');
		}
               //===============================================
               //判断div内的滚动条是否到底部了
	      $("#div1").scroll(function(){
                   if($("#div1").height()==$("#div1").scrollTop())
                       alert("滚动条到底了");   
	       });
	});
	
         //判断div内的滚动条是否到底部了
	$(document).ready(function (){
              var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)
              var nScrollTop = 0;   //滚动到的当前位置
              var nDivHight = $("#div1").height();
             $("#div1").scroll(function(){
                     nScrollHight = $(this)[0].scrollHeight;
                     nScrollTop = $(this)[0].scrollTop;
                    if(nScrollTop + nDivHight >= nScrollHight)
                         alert("滚动条到底部了");
                    });
             });
        })

JS获取style属性

没有评论

2011 年 05 月 05 日 at 下午 5:36分类:CSS | HTML | JavaScript

<html >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>currentStyle</title>
    <!-- <style type="text/css">
    </style>-->
    <link rel="Stylesheet" href="StyleSheet.css" type="text/css" />
</head>
<body>
    <div id="qq" class="divtitle">
        测试样式
    </div>
    <script type="text/javascript"> 
//document.defaultView.getComputedStyle 这是w3c标准方法,取得元素的样式信息,因为有些样式是在外部css文件定义的,所以用element.style是取不到的 如果是IE,可以用 element.currentStyle["name"]
   function GetCurrentStyle (obj, prop) 
   { 
      if (obj.currentStyle) //IE
      { 
          return obj.currentStyle[prop]; 
      }
      else if (window.getComputedStyle) //非IE
      { 
          propprop = prop.replace (/([A-Z])/g, "-$1"); 
          propprop = prop.toLowerCase (); 
          return document.defaultView.getComputedStyle(obj,null)[propprop]; 
      } 
     return null;
   } 
   var dd=document.getElementById("qq"); 
   alert(GetCurrentStyle(dd,"color")); 
    </script>
</body>
</html>
外部样式:StyleSheet
.divtitle
        {
            background: blue;
            color: #cdcdcd;
            width: 200px;
        }

JS函数

var getCss = function(o,key){
    return o.currentStyle ? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key]; 
};

div层遇到flash不显示的问题

没有评论

2011 年 04 月 07 日 at 下午 6:02分类:HTML | WEB开发

经常遇到 Flash 插入到网页 Div 层后就不显示了。解决方法是将插入到网页中的 Flash 设置为透明 flash,将 wmode 赋值为 transparent,以下为旧式插入方式:

<object classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0 width=550 height=400> 
<param name=movie value=test.swf> 
<param name=quality value=high> 
<param name=wmode value=transparent> 
<embed src=http://www.59bj.com/test.swf width=550 height=400 quality=high pluginspage=http://www.macromedia.com/go/getflashplayer type=application/x-shockwave-flash wmode=transparent></embed> 
</object>

php判断浏览器类型

没有评论

2010 年 12 月 27 日 at 下午 4:32分类:CSS | HTML | PHP | WEB开发

很多时候都需要判断浏览器类型来写代码,比如CSS的兼容性,若是PHP页面,可以用PHP来判断浏览器类型来显示不同的CSS代码。还有很多,都是需要 判断浏览器类型的。简单判断浏览器的方法主要是用$_SERVER["HTTP_USER_AGENT"],PHP比其它语言总是简单。下面就收藏这段代 码吧,总有用,可以判断IE6、IE7、IE8、firefox等浏览器。
代码1:

<?php
if(strpos($_SERVER["HTTP_USER_AGENT"],”MSIE 8.0″))
echo “Internet Explorer 8.0″; // 这里可以写其他的执行命令
else if(strpos($_SERVER["HTTP_USER_AGENT"],”MSIE 7.0″))
echo “Internet Explorer 7.0″;
else if(strpos($_SERVER["HTTP_USER_AGENT"],”MSIE 6.0″))
echo “Internet Explorer 6.0″;
else if(strpos($_SERVER["HTTP_USER_AGENT"],”Firefox/3″))
echo “Firefox 3″;
else if(strpos($_SERVER["HTTP_USER_AGENT"],”Firefox/2″))
echo “Firefox 2″;
else if(strpos($_SERVER["HTTP_USER_AGENT"],”Chrome”))
echo “Google Chrome”;
else if(strpos($_SERVER["HTTP_USER_AGENT"],”Safari”))
echo “Safari”;
else if(strpos($_SERVER["HTTP_USER_AGENT"],”Opera”))
echo “Opera”;
else echo $_SERVER["HTTP_USER_AGENT"];
?>

代码2:

<?php  
    //baseAgent类,抽象的基类  
    abstract class baseAgent  
    {  
        abstract function PrintPage();  
    }  
    //ieAgent类,用于客户端是IE时调用的类  
    class ieAgent extends baseAgent  
    {  
        function PrintPage()  
        {  
            return "当前浏览器是IE!";  
        }  
    }  
    //otherAgent类,用于客户端不是IE时调用的类  
    class otherAgent extends baseAgent  
    {  
        function PrintPage()  
        {  
            return "当前浏览器不是IE!";  
        }  
    }  
    //判断并创建不同的对象类型,对象名为$currPage  
    if(strstr($_SERVER["HTTP_USER_AGENT"], "IEAGENT"))  
    {  
        $currPage = new ieAgent();  
    }   
    else  
    {  
        $currPage = new otherAgent();  
    }  
    //输出  
    echo $currPage->PrintPage();  
?>  

自己写的背景变黑层效果代码

没有评论

2010 年 09 月 24 日 at 下午 10:33分类:HTML

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>层</title>
<style type=”text/css”>
#ceng{
width:100%;
height:100%;
position:absolute;
left:0px;
top:0px;
display:none;
}
#yan{
width:100%;
height:100%;
background:gray;
position:absolute;
top:0px;
left:0px;
z-index:-1;
filter:alpha(opacity=20);
}
#bin{
position:absolute;
width:100%;
left:0px;
}
#show{
width:300px;
height:250px;
border:2px solid red;
background:green;
margin-left:auto;
margin-right:auto;
margin-top:200px;
}
</style>
<script type=”text/javascript”>
function show() {
document.getElementById(“ceng”).style.display=”block”;
}
</script>
<!– 弹窗end –>
</head>
<body>
<input type=”button” value= “点击” onclick=”show()”>
<div id=”ceng”>
<div id=”bin”>
<div id=”show”><input type=text></div>
</div>
<div id=”yan”></div>
</div>
</body>
</html>
原理:
<html>
<head>
<style type=”text/css”>
img{
position:absolute;
left:100px;
top:0px;
z-index:-1;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<img src=”eg_smile.gif” />
<p>由于图像的 z-index 是 -1,因此它在文本的后面出现。</p>
</body>
</html>

更改头像 onchang事件

没有评论

2010 年 09 月 08 日 at 下午 7:21分类:HTML

<body>
<select name=lanrentuku onchange=”document.images['idface'].src=options[selectedIndex].value;”>
<option value=”http://www.lanrentuku.com/down/js/images/12625057550.gif” >头像01</option>
<option value=”http://www.lanrentuku.com/down/js/images/12625057551.gif” >头像02</option>
<option value=”http://www.lanrentuku.com/down/js/images/12625057552.gif” >头像03</option>
</select>
<div style=”position:absolute;”><img src=”http://www.lanrentuku.com/down/js/images/12625057550.gif” id=idface></div>
<br/ ><br/ ><br/ >
<p>查找更多代码,请访问:<a href=”http://www.lanrentuku.com/” target=”_blank”>懒人图库</a></p>
</body>