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 onload="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 onmouseover="var obj=document.body.createTextRange();obj.moveToElementText(this);obj.select();obj.execCommand('Copy')" onclick="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);
}
}