1、无提示关闭窗口
<input type="button" onClick="window.opener = '';window.close();" value="IE6最简单的无提示关闭窗口" >
2、防止被人iframe
if (top.location != self.location)
{
top.location.href="http://www.34do.net";
}
3、判断一个对象存在不存在
document.all("a")==null(不存在)
4、弹出子窗口
window.open ('default.asp', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no')
5、打开模态窗口
window.showModalDialog('default.asp',window,'help: No; resizable: No; status: No;scrollbars:No;center: Yes;dialogWidth:width;dialogHeight:height;')
6、弹出的子窗口刷新父窗口
window.parent.location.reload();
7、模态窗口刷新父窗口
window.parent.dialogArguments.document.execCommand('Refresh');
8、一个js文件包含另外一个js文件
document.write('<script src="/b_trade/public/new/public.js"><//script>');
9、让文字竖着写
<td style="Writing-mode:tb-rl;">佛罗伦</td>
10、iframe引用自己
window.parent.document.getElementById("iframe_dg")
这样在iframe文件里就可以操作它自己,比如:window.parent.document.getElementById("iframe_dg").height=200
11、根据内容自动调整IFrame高度
function autoSetIframeSize()
{
var obj=self.parent.parent.document.all[self.name];
if(obj!=null)
{
self.parent.parent.document.all[self.name].style.pixelHeight=self.document.body.scrollHeight+5;
}
}
必须定义iframe的name属性
<iframe id="iframe1" name="iframe1" align="middle" frameborder="0" width="100%" height="250" scrolling="no" src="a.asp"></iframe>
将a.asp的<body>修改为:
<body οnlοad="autoSetIframeSize()">
12、为单元格添加渐变色效果(ie支持,firefox不支持)
.bg3
{
FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr=#842B00, EndColorStr=#FFFFFF);
}
效果如图
13、定时执行任务
规定一项任务在一定时间内执行:delayID=setTimeout(vCode, iMilliSeconds),在需要的时候,可以强制停止该任务:clearTimeout(delayID)
14、自动选中复制
<span οnmοuseοver="var obj=document.body.createTextRange();obj.moveToElementText(this);obj.select();obj.execCommand('Copy')" οnclick="var obj=document.body.createTextRange();obj.moveToElementText(this);obj.select();obj.execCommand('Copy')" >选中我并复制我</span>
15、产生随机数
VB的Rnd函数产生的随机数范围为0-1。假如要从(min,max)这个范围内随机抽取一个数,具体公式如下: 随机数 = (max - min) * Rnd() + min,min和max可以是任意整数,只是min<max。
16、限制文本框只能输入正整数
<input onKeyUp="this.value=this.value.replace(/[^/d]/g,'')">
17.让表格的表头固定
<div style="OVERFLOW: no; WIDTH: 100%; HEIGHT:15;/.">用一个层把要固定的部分套起来
使用FileUpload组件上传文件
文件上传在web应用中非常普遍,要在jsp环境中实现文件上传功能是非常容易的,因为网上有许多用java开发的文件上传组件,本文以commons-fileupload组件为例,为jsp应用添加文件上传功能。
common-fileupload组件是apache的一个开源项目之一,可以从http://jakarta.apache.org/commons/fileupload/
下载。用该组件可实现一次上传一个或多个文件,并可限制文件大小。
下载后解压zip包,将commons-fileupload-1.0.jar复制到tomcat的webapps/你的webapp/WEB-INF/lib/下,目录不存在请自建目录。
新建一个servlet: Upload.java用于文件上传:
import java.io.*;
import java.util.*;
import javax.servlet.*;
import javax.servlet.http.*;
import org.apache.commons.fileupload.*;
public class Upload extends HttpServlet {
private String uploadPath = "C://upload//"; // 上传文件的目录
private String tempPath = "C://upload//tmp//"; // 临时文件目录
public void doPost(HttpServletRequest request,
HttpServletResponse response)
throws IOException, ServletException
{
}
}
在doPost()方法中,当servlet收到浏览器发出的Post请求后,实现文件上传。以下是示例代码:
public void doPost(HttpServletRequest request,
HttpServletResponse response)
throws IOException, ServletException
{
try {
DiskFileUpload fu = new DiskFileUpload();
// 设置最大文件尺寸,这里是4MB
fu.setSizeMax(4194304);
// 设置缓冲区大小,这里是4kb
fu.setSizeThreshold(4096);
// 设置临时目录:
fu.setRepositoryPath(tempPath);
// 得到所有的文件:
List fileItems = fu.parseRequest(request);
Iterator i = fileItems.iterator();
// 依次处理每一个文件:
while(i.hasNext()) {
FileItem fi = (FileItem)i.next();
// 获得文件名,这个文件名包括路径:
String fileName = fi.getName();
// 在这里可以记录用户和文件信息
// ...
// 写入文件,暂定文件名为a.txt,可以从fileName中提取文件名:
fi.write(new File(uploadPath + "a.txt"));
}
}
catch(Exception e) {
// 可以跳转出错页面
}
}
如果要在配置文件中读取指定的上传文件夹,可以在init()方法中执行:
public void init() throws ServletException {
uploadPath = ....
tempPath = ....
// 文件夹不存在就自动创建:
if(!new File(uploadPath).isDirectory())
new File(uploadPath).mkdirs();
if(!new File(tempPath).isDirectory())
new File(tempPath).mkdirs();
}
编译该servlet,注意要指定classpath,确保包含commons-upload-1.0.jar和tomcat/common/lib/servlet-api.jar。
配置servlet,用记事本打开tomcat/webapps/你的webapp/WEB-INF/web.xml,没有的话新建一个。
典型配置如下:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE web-app
PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>
<servlet>
<servlet-name>Upload</servlet-name>
<servlet-class>Upload</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Upload</servlet-name>
<url-pattern>/fileupload</url-pattern>
</servlet-mapping>
</web-app>
配置好servlet后,启动tomcat,写一个简单的html测试:
<form action="fileupload" method="post"
enctype="multipart/form-data" name="form1">
<input type="file" name="file">
<input type="submit" name="Submit" value="upload">
</form>
注意action="fileupload"其中fileupload是配置servlet时指定的url-pattern。
下面是某个大虾的代码:
这个Upload比smartUpload好用多了.完全是我一个个byte调试出来的,不象smartUpload的bug具多.
调用方法:
Upload up = new Upload();
up.init(request);
/**
此处可以调用setSaveDir(String saveDir);设置保存路径
调用setMaxFileSize(long size)设置上传文件的最大字节.
调用setTagFileName(String)设置上传后文件的名字(只对第一个文件有效)
*/
up. uploadFile();
然后String[] names = up.getFileName();得到上传的文件名,文件绝对路径应该是
保存的目录saveDir+"/"+names[i];
可以通过up.getParameter("field");得到上传的文本或up.getParameterValues("filed")
得到同名字段如多个checkBox的值.
其它的自己试试.
源码:____________________________________________________________
package com.inmsg.beans;
import java.io.*;
import java.util.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class Upload {
private String saveDir = "."; //要保存文件的路径
private String contentType = ""; //文档类型
private String charset = ""; //字符集
private ArrayList tmpFileName = new ArrayList(); //临时存放文件名的数据结构
private Hashtable parameter = new Hashtable(); //存放参数名和值的数据结构
private ServletContext context; //程序上下文,用于初始化
private HttpServletRequest request; //用于传入请求对象的实例
private String boundary = ""; //内存数据的分隔符
private int len = 0; //每次从内在中实际读到的字节长度
private String queryString;
private int count; //上载的文件总数
private String[] fileName; //上载的文件名数组
private long maxFileSize = 1024 * 1024 * 10; //最大文件上载字节;
private String tagFileName = "";
public final void init(HttpServletRequest request) throws ServletException {
this.request = request;
boundary = request.getContentType().substring(30); //得到内存中数据分界符
queryString = request.getQueryString();
}
public String getParameter(String s) { //用于得到指定字段的参数值,重写request.getParameter(String s)
if (parameter.isEmpty()) {
return null;
}
return (String) parameter.get(s);
}
public String[] getParameterValues(String s) { //用于得到指定同名字段的参数数组,重写request.getParameterValues(String s)
ArrayList al = new ArrayList();
if (parameter.isEmpty()) {
return null;
}
Enumeration e = parameter.keys();
while (e.hasMoreElements()) {
String key = (String) e.nextElement();
if ( -1 != key.indexOf(s + "||||||||||") || key.equals(s)) {
al.add(parameter.get(key));
}
}
if (al.size() == 0) {
return null;
}
String[] value = new String[al.size()];
for (int i = 0; i < value.length; i++) {
value[i] = (String) al.get(i);
}
return value;
}
public String getQueryString() {
return queryString;
}
public int getCount() {
return count;
}
public String[] getFileName() {
return fileName;
}
public void setMaxFileSize(long size) {
maxFileSize = size;
}
public void setTagFileName(String filename) {
tagFileName = filename;
}
public void setSaveDir(String saveDir) { //设置上载文件要保存的路径
this.saveDir = saveDir;
File testdir = new File(saveDir); //为了保证目录存在,如果没有则新建该目录
if (!testdir.exists()) {
testdir.mkdirs();
}
}
public void setCharset(String charset) { //设置字符集
this.charset = charset;
}
public boolean uploadFile() throws ServletException, IOException { //用户调用的上载方法
setCharset(request.getCharacterEncoding());
return uploadFile(request.getInputStream());
}
private boolean uploadFile(ServletInputStream servletinputstream) throws //取得央存数据的主方法
ServletException, IOException {
String line = null;
byte[] buffer = new byte[256];
while ( (line = readLine(buffer, servletinputstream, charset)) != null) {
if (line.startsWith("Content-Disposition: form-data;")) {
int i = line.indexOf("filename=");
if (i >= 0) { //如果一段分界符内的描述中有filename=,说明是文件的编码内容
String fName = getFileName(line);
if (fName.equals("")) {
continue;
}
if (count == 0 && tagFileName.length() != 0) {
String ext = fName.substring( (fName.lastIndexOf(".") + 1));
fName = tagFileName + "." + ext;
}
tmpFileName.add(fName);
count++;
while ( (line = readLine(buffer, servletinputstream, charset)) != null) {
if (line.length() <= 2) {
break;
}
}
File f = new File(saveDir, fName);
FileOutputStream dos = new FileOutputStream(f);
long size = 0l;
while ( (line = readLine(buffer, servletinputstream, null)) != null) {
if (line.indexOf(boundary) != -1) {
break;
}
size += len;
if (size > maxFileSize) {
throw new IOException("文件超过" + maxFileSize + "字节!");
}
dos.write(buffer, 0, len);
}
dos.close();
}
else { //否则是字段编码的内容
String key = getKey(line);
String value = "";
while ( (line = readLine(buffer, servletinputstream, charset)) != null) {
if (line.length() <= 2) {
break;
}
}
while ( (line = readLine(buffer, servletinputstream, charset)) != null) {
if (line.indexOf(boundary) != -1) {
break;
}
value += line;
}
put(key, value.trim(), parameter);
}
}
}
if (queryString != null) {
String[] each = split(queryString, "&");
for (int k = 0; k < each.length; k++) {
String[] nv = split(each[k], "=");
if (nv.length == 2) {
put(nv[0], nv[1], parameter);
}
}
}
fileName = new String[tmpFileName.size()];
for (int k = 0; k < fileName.length; k++) {
fileName[k] = (String) tmpFileName.get(k); //把ArrayList中临时文件名倒入数据中供用户调用
}
if (fileName.length == 0) {
return false; //如果fileName数据为空说明没有上载任何文件
}
return true;
}
private void put(String key, String value, Hashtable ht) {
if (!ht.containsKey(key)) {
ht.put(key, value);
}
else { //如果已经有了同名的KEY,就要把当前的key更名,同时要注意不能构成和KEY同名
try {
Thread.currentThread().sleep(1); //为了不在同一ms中产生两个相同的key
}
catch (Exception e) {}
key += "||||||||||" + System.currentTimeMillis();
ht.put(key, value);
}
}
/*
调用ServletInputstream.readLine(byte[] b,int offset,length)方法,该方法是从ServletInputstream流中读一行
到指定的byte数组,为了保证能够容纳一行,该byte[]b不应该小于256,重写的readLine中,调用了一个成员变量len为
实际读到的字节数(有的行不满256),则在文件内容写入时应该从byte数组中写入这个len长度的字节而不是整个byte[]
的长度,但重写的这个方法返回的是String以便分析实际内容,不能返回len,所以把len设为成员变量,在每次读操作时
把实际长度赋给它.
也就是说在处理到文件的内容时数据既要以String形式返回以便分析开始和结束标记,又要同时以byte[]的形式写到文件
输出流中.
*/
private String readLine(byte[] Linebyte,
ServletInputStream servletinputstream, String charset) {
try {
len = servletinputstream.readLine(Linebyte, 0, Linebyte.length);
if (len == -1) {
return null;
}
if (charset == null) {
return new String(Linebyte, 0, len);
}
else {
return new String(Linebyte, 0, len, charset);
}
}
catch (Exception _ex) {
return null;
}
}
private String getFileName(String line) { //从描述字符串中分离出文件名
if (line == null) {
return "";
}
int i = line.indexOf("filename=");
line = line.substring(i + 9).trim();
i = line.lastIndexOf("//");
if (i < 0 || i >= line.length() - 1) {
i = line.lastIndexOf("/");
if (line.equals("/"/"")) {
return "";
}
if (i < 0 || i >= line.length() - 1) {
return line;
}
}
return line.substring(i + 1, line.length() - 1);
}
private String getKey(String line) { //从描述字符串中分离出字段名
if (line == null) {
return "";
}
int i = line.indexOf("name=");
line = line.substring(i + 5).trim();
return line.substring(1, line.length() - 1);
}
public static String[] split(String strOb, String mark) {
if (strOb == null) {
return null;
}
StringTokenizer st = new StringTokenizer(strOb, mark);
ArrayList tmp = new ArrayList();
while (st.hasMoreTokens()) {
tmp.add(st.nextToken());
}
String[] strArr = new String[tmp.size()];
for (int i = 0; i < tmp.size(); i++) {
strArr[i] = (String) tmp.get(i);
}
return strArr;
}
}
下载其实非常简单,只要如下处理,就不会发生问题。
public void downLoad(String filePath,HttpServletResponse response,boolean isOnLine)
throws Exception{
File f = new File(filePath);
if(!f.exists()){
response.sendError(404,"File not found!");
return;
}
BufferedInputStream br = new BufferedInputStream(new FileInputStream(f));
byte[] buf = new byte[1024];
int len = 0;
response.reset(); //非常重要
if(isOnLine){ //在线打开方式
URL u = new URL("file:///"+filePath);
response.setContentType(u.openConnection().getContentType());
response.setHeader("Content-Disposition", "inline; filename="+f.getName());
//文件名应该编码成UTF-8
}
else{ //纯下载方式
response.setContentType("application/x-msdownload");
response.setHeader("Content-Disposition", "attachment; filename=" + f.getName());
}
OutputStream out = response.getOutputStream();
while((len = br.read(buf)) >0)
out.write(buf,0,len);
br.close();
out.close();
}
smartUpload:
上传:在unix/linux系统上,如果上传格式文档,如Wrod,Excel等文档,很多时候打开文档出错。
原因:EOF处理没有判断。
下载:更不用说了,基本上都会出错,下载时会比原文件多出N多个字节。你看看它自带的例子就知道了。下载时一定要这样写:
<%@page xxxxxx%><%
smartUpload smu= ............
如果前面有共它任何指令语句或动作语句写在多行而没有在一行(有病啊,我要是inclide n多个文件都不能分行),那下载的文件肯定有问题。
原因:jsp在编译时默认了文档类型并有默认输出,而smartUpload在输出要下载的文档之前没有清空。
用ajax实现表动态滚动
一、概述
在本文中将讨论如何实现一个基于Ajax的可滚动的表格,在这个表格中,每一行都是从服务器动态获得的,当用户滚动时,整个页并不刷新,而只是局部刷新。这项技术对于实现拥有很多动态数据的表格页是非常有效和便利的。例如,当重表调整页的尺寸后,表格数据将会平滑地滚动。这是由于表格中的数据是通过AJAX从服务端异步获得的,然后由JavaScript对数据进行分析,并动态地插入每一行,而XMLHttpRequest对象用于向服务端发送请求,最后由CSS控制显示风格。
动态滚动表格的实现主要得意于现代的浏览器引入了XMLHttpRequest对象。这使得JavaScript对象可以使用异步的方式向服务端发送请求,并从服务端接收响应,而这一切都不需要刷新整个网页。更在很多的Web2.0站点都使用了很多AJAX技术来使界面变得更丰富多彩,其中XMLHttpRequest在这些站点和这些动态的网页中被广泛地使用。
可滚动的表单是一个非常好的富客户端接口,它使用了Web2.0的技术来为用户展现Web内容。动态滚动技术的实现从某种程度上也取决于最新的CSS2标准的推出,这个新的CSS标准现在已经被很多流行的浏览器支持。在本文提供的代码中,我将介绍如何在屏幕的一部分实现可动态滚动的表格,但如果读者所使用的浏览器不动态最新的CSS标准,而只动态AJAX,这个动态表格将变成充满整个页面,而不是屏幕的一部分。
图1是一个Google读者网站的一个动态表格的例子。要注意的是在图1的截屏上一100项记录,通过移动垂直滚动条可看以更多的记录,当显示到140条时(如图2所示),滚动条的大小开始变化 。这时,所有其他的记录仍然保持在本页的同样的位置。
二、如保实现动态表单
为了使任何HTML元素(在本文中是表格)可滚动,需要使用一个可滚动的区域,在这里是DIV,这个元素应该比表格的实际高度小。如一个DIV的高度为100px,包含一个高度为200px的表格,这样才可以使表格滚动。下面的代码演示了div和table的使用:
<div style="height:100px; width:50px;
overflow:auto; overflow-x:hidden;">
<table style="height:200px;">
<tr><td>vlad</td></tr>
</table>
</div>
要注意的是,如果我们将table和div分开写,那么就只有div滚动,而不是表在滚动。让我们先看看如下的代码:
<table style="height:50px; width:100px;
overflow:auto;overflow-x:hidden;">
<tr><td><p>vlad 1</p></td></tr>
<tr><td><p>vlad 2</p></td></tr>
<tr><td><p>vlad 3</p></td></tr>
<tr><td><p>vlad 4</p></td></tr>
<tr><td><p>vlad 5</p></td></tr>
</table>
<hr/>
<div style="height:100px; width:100px;
overflow:auto;overflow-x:hidden;">
<p>Vlad 1 </p>
<p>Vlad 2</p>
<p>Vlad 3</p>
<p>Vlad 4</p>
<p>Vlad 5</p>
</div>
我们注意到table的高度是50,但它仍然不滚动。
上面代码的两个CSS属性:overflow auto和overflow-x:hidden,实际上是将滚动条显示在div的右侧。不过浏览器的CSS引擎必须支持这两个属性,否则,这个表将不会有滚动条。
如果div中的内容落在了div的外面,可能的原因很多,如margin为负、使用了绝对位置、内容超过了width/height等等,而overflow和overflow-x属性只是描述了内容超过div的宽度应该如何去做。
这些CSS属性仅仅定义了div和table的外观,而不是带有滚动属性的JavaScript API接口。为了充分理解一个动态表单的实现,我们需要知道测量HTML元素在网页中的尺寸和位置的属性。这些属性可以通过JavaScript用可编程的方式来操作,更值得庆幸的是,这些API在目前的主要浏览器中都可以使用。
三、HTML元素属性
在网页的中心是HTML元素属性的表单,代码位于页中心的HTML BODY和DIV中。我们从图5看出,这页有很多这类东西,但是我们最感兴趣的是scrollTop、scrollHeight和clientHeight。
这个scrollTop属性指定了可视区域(被div的height和width定义的)的内容的上边界的位置,当用户滚动时,scrollTop将确定内容移动的距离(单位是像素)。这个scrollHeight属性指定了inner元素的实际高度(单位是像素),而clientHeight指定了可视区域的实际高度。在本文的例子中,可视区域是outer div元素,而内容是inner表。Height和Top属性并不能解决元素的border、margin或padding,如果我们的元素有这些属性的任何一个,可以使用其他类似的属性代替。和height类似,由width属性来处理水平滚动计算。
第一个被放置在页上的元素都有这些属性,以及使用这种方式的元素看起来都以来于这些属性。图6显示了一个关于div属性的简单例子。
四、实现动态滚动表格
为了实现一个动态表格,我现在已经将表格的显示部分放到了叫"scrolltable"的CSS中,将建立了一个id为"new_items_div"的div和一个id为"new_items"的table。叫"status"的div的目的是为了显示不同的信息。这段html代码如下:
<div id='status'></div>
<div id="new_items_div" style="height:500px;" class="scrolltable">
<table id="new_items" border="0" cellpadding="0" cellspacing="0" >
<tbody>
</tbody>
</table>
</div>
实现滚动逻辑的代码的第一部分是自动追加更多的行,这些行包括用户已经滚动过的行。为了实现这个功能,我建立了一个JavaScript函数detectScroll(),这个函数每0.5秒执行一次。除了这种方法,还可以为滚动事件建立一个处理事件的函数,并和div绑定。这个startPolling函数当整个页面装载时被调用,并开始周期性地调用detectScroll()函数。
在这个算法中,将探测滚动位置,并检查所滚动的距离是否大于等于可视区域高度。我还加了20个象素来将滚动条的尺寸计算在内,以确保滚动条可以在适当的位置出现。
如果用户在向下滚动后向上滚动,并没有新行出现,而只是将已经显示过的数据重新显示。下面是完整的JavaScript代码:
function startPolling(){ pollID = setInterval("detectScroll()",500); }
function detectScroll(){
var intElemScrollHeightOuter = document.getElementById("new_items_div").clientHeight;
var intElemScrollHeightInner = document.getElementById("new_items").scrollHeight;
var intElemScrolled = document.getElementById("new_items_div").scrollTop;
var height = intElemScrollHeightInner - intElemScrollHeightOuter;
if (intElemScrolled >= height-20) {
//alert("You are at " + document.getElementById("new_items").scrollTop + " pixels. adding rows...");
document.getElementById('status').innerHTML =
"Showing <b>"+(viewCnt+5)+"</b> items";
fetchAction(viewCnt);
viewCnt +=5;
}
return true;
}
fetchAction(0);
startPolling();
</script>
如果当detectScroll执行时返回true。那么会有一个新的JavaScript函数fetchAction被调用。而且还需要使用整个行数来更新div的"status"。
fetchAction函数通过异步的方式访问服务器,并使用XMLHttpRequest对象来分派一个回调函数readFeed来处理服务端的响应。我们在这里不用管服务端是如何实现的,只要知道服务端返回了一个合法的XML就可以了,服务端可以使用任何语言来完成这个任务。在本例中使用了PHP来实现服务端,读者也可以根据自己的喜好使用Java或.NET。fetchAction()函数的代码如下:
function fetchAction(si) {
var xmlHttp = getXmlHttpObject();
if (xmlHttp==null) {
alert('警告,浏览器不支持XmlHttpObject()');
return;
}
xmlHttp.onreadystatechange=function(){
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
readFeed(xmlHttp);
xmlHttp = null;
}
}
try{
url = 'fetch_items.php?ri='+(Math.floor(Math.random()*10000000))+'&si='+si;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
} catch (ex){
document.getElementById("status").innerHTML = ex;
clearInterval(pollID);
}
}