2012年8月31日 星期五

jsp 二維陣列

int[] a=new int[5];
String str=new String[x.length];
jsp中要指定位址數

今天要認栽了，程度不夠，寫起程式，覺得不順手
希望能拿作為消遣的工具
有點不開心
老師認為我野心太大

張貼者： 於 沒有留言:

2012年8月29日 星期三

jquery 靜態取給值，屬性取給值


例子如下
</head>
<script language="javascript" src="jquery-1.8.0.js"></script>
<script language="javascript">
 $(document).ready(function()
{
$("#a1").click(function()
 {
 //1.取innerHTML值
 //var inner=$("#a1").text();
 //alert(inner);

 //2.給innerHTML值
 //$("#a1").text("關閉");

 //1.取attr屬性值
 //var atr=$("#a1").attr("href");
 //alert(atr);
 //1.給attr屬性值,代表集合，可以是兩個以上屬性指派，用，點隔開
 $("#a1").attr({href:'http://www.yahoo.com.tw'});

 });
});
</script>
<body>
<a id="a1" href="javascript:;" >開始</a>
</body>
</html>

張貼者： 於 沒有留言:

css position設定

relative 相對於normal 即原來放的位置
z-index圖層設定，數字大者在最上層
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
</head>
<style type="text/css">
div { border:1px solid black; }
.infront {
background-color:#ff9900;
width:100px;
height: 100px;
position:relative;
top:80px;
left:20px;
z-index: 2;
}
.behind {
background-color:#eeeeee;
width:100px;
height: 100px;
position:relative;
top:-30px;
left:20px;
z-index: 1;
}
</style>
<body>

<div class="infront">
In front
</div>
<div class="behind">
Behind
</div>

</body>
</html>
原位置

In front
Behind

改變後結果

In front
Behind


張貼者： 於 沒有留言:

jquery .data() 的用法

此方法 讓DOM元素保存資料，以便參考引用

 .data("名稱",( key: value ,key2:value2)) 
舉例 參考http://api.jquery.com/data/

 .data("test", { first: 16, last: "pizza!" });

<!DOCTYPE html>
<html>
<head>
  <style>
  div { color:blue; }
  span { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div>
    The values stored were
    <span></span>
    and
    <span></span>
  </div>
<script>
$("div").data("test", { first: 16, last: "pizza!" });
$("span:first").text($("div").data("test").first);
$("span:last").text($("div").data("test").last);
</script>

</body>
</html>


The values stored were 16 and pizza!
張貼者： 於 沒有留言:

2012年8月28日 星期二


radio的取值練習
!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
</head>
<script language="javascript" src="jquery-1.8.0.js" ></script>
<script language="javascript">
$(document).ready(function()
{
$("#dv1").hide();
$("#dv1").val();
$("#t1").click(function()
{
var k1=$(this).offset();
var x=k1.left;
var y=k1.top+22;
$("#dv1").css({"position":"absolute","left":x+"px","top":y+"px"}).show();
});
$("#a1").click(function()
{
$("#dv1").hide();
});
$("#sure").click(function()
{
var data=$('[name="rd1"]:checked').val();
$("#t1").val(data);
$("#dv1").hide();
});
});
</script>
<body>

<form  method="post" name="f1" id="f1">
出生地：
<input id="t1" name="t1" type="text" size="20" />
<input id="s1" name="s1" type="submit" value="傳送" />
</form>
<div id="dv1" style="width:300px;height:210px;background-color:#3FC">
<table width="300" height="200" border="2">
  <tr>
    <td align="right" height="10">
    <a id="a1" href="javascript:;" style="text-decoration:none">X</a>
    </td>
  </tr>
  <tr>
    <td height="170">
    <input type="radio" id="rd1" name="rd1" value="台南市"/>台南市
    <input type="radio" id="rd1" name="rd1" value="高雄市"/>高雄市
    <input type="radio" id="rd1" name="rd1" value="台中市"/>台中市
    <p>
    <input type="button" id="sure" name="sure" value="確認" />
    </td>
  </tr>
</table>

</div>
</body>
</html>

張貼者： 於 沒有留言:

練習find() ,contains(),filter() 整體程式碼如下：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>contains</title>
</head>
<style type="text/css">

.color{
background-color:#F9F;
}
.color2{
background-color:#FFF;
}
.pdata{
background-color:#FF0;
}
</style>
<script language="javascript" src="jquery-1.8.0.js" ></script>
<script language="javascript">
$(document).ready(function()
{
$("#dv1").hide(100);
$("#tb1 thead tr").addClass("color");
$("#tb1 tbody tr").mouseover(function()
{
$(this).addClass("pdata");

});
$("#tb1 tbody tr").mouseleave(function()
{
$(this).removeClass("pdata");

});
$("#tb1 tbody tr").click(function()
{
$("#dv1").hide(100);
var t1=$(this).find("td").eq(0).text();
var t2=$(this).find("td").eq(1).text();
var t3=$(this).find("td").eq(2).text();
var t4=$(this).find("td").eq(3).text();
var t5=$(this).find("td").eq(4).text();
$("#t1").val(t1);
$("#t2").val(t2);
$("#t3").val(t3);
$("#t4").val(t4);
$("#t5").val(t5);

var x=$(this).offset().left;
var y=$(this).offset().top;
$("#dv1").show(500);
$("#dv1").css('position','absolute');
$("#dv1").css('left',x+50);
$("#dv1").css('top',y);

});
$("#a1").click(function()
{

$("#t1").val("");
$("#t2").val("");
$("#t3").val("");
$("#t4").val("");
$("#t5").val("");
$("#tb1 tbody tr").css('background-color','');


var id=$("#t6").val();
alert(id);
var qtr=$("#tb1 tbody tr:contains('"+id+"')");
qtr.css('background-color','#009999');
alert(qtr.find("td").length);

for(var i=0;i<qtr.find("td").length;i++){
$("#tb2").find("input").eq(i).val(qtr.find("td").eq(i).text());
}
$("#tb1 tbody tr").hide().filter(":contains('"+id+"')").show();
/*
var qtd=$("#tb1 tbody tr td:contains('"+id+"')");
$("#tb1 tbody tr:contains('"+id+"')").css('background-color','#009999');
$("#t1").val( qtd.text());
$("#t2").val( qtd.next().text());
alert(qtd.next().text());
$("#t3").val($("#tb1 tbody tr:contains('"+id+"')").next().next().text());
$("#t4").val($("#tb1 tbody tr:contains('"+id+"')").next().next().next().text());
$("#t5").val($("#tb1 tbody tr:contains('"+id+"')").next().next().next().next().text());*/
});
$("#a2").click(function()
{
var d1=parseInt($("#sel1").val());
var d2=parseInt($("#sel2").val());
var d3=$("#cont").val();
//alert(d1);
switch(d1)
{

 case 5:
 
  switch(d2)
{
 case 1:
var len=$("#tb1 tbody tr").length;
for (var i=0;i<len;i++)
{
var t7=$("#tb1 tbody tr:eq("+i+")").find("td").eq(4).text();
if(t7>d3)
{
$("#tb1 tbody tr:eq("+i+")").show();
}
else
{
$("#tb1 tbody tr:eq("+i+")").hide();
}
}
break;
 case 2:
var len=$("#tb1 tbody tr").length;
for (var i=0;i<len;i++)
{
var t7=$("#tb1 tbody tr:eq("+i+")").find("td").eq(4).text();
if(t7<d3)
{
$("#tb1 tbody tr:eq("+i+")").show();
}
else
{
$("#tb1 tbody tr:eq("+i+")").hide();
}
}
break;
 case 3:
$("#tb1 tbody tr").hide();
$("#tb1 tbody tr").filter(":contains('"+d3+"')").show();
break;
 case 4:
var len=$("#tb1 tbody tr").length;
for (var i=0;i<len;i++)
{
var t7=$("#tb1 tbody tr:eq("+i+")").find("td").eq(4).text();
if(t7>=d3)
{
$("#tb1 tbody tr:eq("+i+")").show();
}
else
{
$("#tb1 tbody tr:eq("+i+")").hide();
}
}
break;
 case 5:

   var len=$("#tb1 tbody tr").length;
for (var i=0;i<len;i++)
{
var t7=$("#tb1 tbody tr:eq("+i+")").find("td").eq(4).text();
if(t7<=d3)
{
$("#tb1 tbody tr:eq("+i+")").show();
}
else
{
$("#tb1 tbody tr:eq("+i+")").hide();
}
}
break;
 }
 break;
 default:
               alert("請選價格");
}
});
});
function fun1()
{
location.reload();
}
</script>
<body >
<div id="dv2" >
<table id="tb1" width="600" border="2">
<thead>
  <tr>
    <td width="120" >編號</td>
    <td width="120" >書名</td>
    <td width="120" >作者</td>
    <td width="120" >出版社</td>
    <td width="120" >價格</td>
  </tr>
</thead>
<tbody>
  <tr>
    <td>b1001</td>
    <td>java</td>
    <td>小明</td>
    <td>文魁</td>
    <td>300</td>
  </tr>
  <tr>
    <td>b1002</td>
    <td>c++</td>
    <td>小張</td>
    <td>基峯</td>
    <td>400</td>
  </tr>
  <tr>
    <td>b1003</td>
    <td>Delphi</td>
    <td>小玲</td>
    <td>知城</td>
    <td>250</td>
  </tr>
  <tr>
    <td>b1004</td>
    <td>Jbuilder</td>
    <td>小張</td>
    <td>松崗</td>
    <td>600</td>
  </tr>
</tbody>
</table>
</div>
<p><p>
<div id="dv1" style="background-image:url(image/bg2.jpg);width:600px" >
<form id="f1" >
<table id="tb2" width="600" border="2">
  <tr>
    <td width="81">編號 </td>
    <td width="501"><input id="t1" name="t1" type="text" size="30" /></td>
  </tr>
  <tr>
    <td>書名</td>
    <td><input id="t2" name="t2" type="text" size="30" /></td>
  </tr>
  <tr>
    <td>作者</td>
    <td><input id="t3" name="t3" type="text" size="30" /></td>
  </tr>
  <tr>
    <td>出版社</td>
    <td><input id="t4" name="t4" type="text" size="30" /></td>
  </tr>
  <tr>
    <td>價格</td>
    <td><input id="t5" name="t5" type="text" size="30" /></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>
      <input type="submit" name="s1"  value="確認" />
    </td>
    <td>
      <input type="reset" name="s2"  value="清除" />&nbsp;&nbsp;&nbsp;&nbsp;
      <input type="button" name="bt3"  value="關閉" onclick="fun1()" />
      </td>
  </tr>
   <tr>
     <td>查詢編號</td>
     <td><input id="t6" name="t6" type="text" size="30" />
       <a id="a1" href="javascript:;" >送出查詢</a></td>
   </tr>
</table>

</form>
<div id="dv3">

查詢價格&nbsp;
  <select name="sel1" id="sel1" >
    <option value="1">編號</option>
    <option value="2">書名</option>
    <option value="3">作者</option>
    <option value="4">出版社</option>
    <option value="5">價格</option>
  </select>
內容&nbsp;
   <select name="sel2" id="sel2">
    <option value="1">大於</option>
    <option value="2">小於</option>
    <option value="3">等於</option>
    <option value="4">大於等於</option>
    <option value="5">小於等於</option>
  </select>
  <input id="cont" name="cont" type="text" size="20" />
 &nbsp;<a id="a2" href="javascript:;" >查詢</a>
</div>
</div>
</body>
</html>

張貼者： 於 沒有留言:

2012年8月27日 星期一

jquery 處理資料結構演算法$.post

此例用了三個檔及person 資料庫
jdata1.jsp   //html要移除乾淨，才不使jquery混亂
<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<%@include file="querydata.jsp"%>
<%
String[][] data=null;
String id=request.getParameter("id");
//String id="p1002";
String databasename="persondata";
String strsql="select * from person where 編號='"+id+"'";

data=querydatafun(databasename,strsql);
String str="";

if(data.length==0)
{
str="查無此資料";
}
else
{
for(int i=0;i<data.length;i++)
{
for(int j=0;j<data[0].length;j++)
{
str+=data[i][j]+" ";
}
}
}
out.print(str);
%>
querydata.jsp

<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<%@page import="java.util.*"%>
<%!
 public String[][] querydatafun(String databasename,String strsql)
 {
  ResultSet rs=null;
  String[][] resultdata=null;

  try
  {
    Class.forName("org.gjt.mm.mysql.Driver");
  }
  catch(Exception e)
  {
   //out.print("資料庫驅動程式失敗");
  }

  try
  {
 Connection myconn=DriverManager.getConnection("jdbc:mysql://localhost/"+databasename+"?useUnicode=true&characterEncoding=utf-8","root","");
   
 Statement mysmt=myconn.createStatement();
 rs=mysmt.executeQuery(strsql);
 int fieldcount=rs.getMetaData().getColumnCount();
 //out.print("總欄位數:"+fieldcount+"<p>");
 for(int i=0;i<fieldcount;i++)
 {
   //out.print(rs.getMetaData().getColumnName(i+1)+"<p>");
 }
 rs.first();
 rs.last();
 int rowcount=rs.getRow();
 //out.print("總記錄數:"+rowcount+"<p>");

 if(rowcount==0)
 {
resultdata=new String[0][0];
 }
 else
 {
   resultdata=new String[rowcount][fieldcount];
   rs.beforeFirst();

   int j=0;
   while(rs.next())
   {
 for(int i=0;i<fieldcount;i++)
 {
resultdata[j][i]=rs.getString(i+1);
 }
 j++;
   }
   rs.close();
        myconn.close();
 }
  }
  catch(SQLException er)
  {
     //out.print("資料庫管理系統無法啟動");
  }

  return resultdata;
 }
%>

<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<%@page import="java.util.*"%>
<%!
 public String[][] querydatafun(String databasename,String strsql)
 {
  ResultSet rs=null;
  String[][] resultdata=null;

  try
  {
    Class.forName("org.gjt.mm.mysql.Driver");
  }
  catch(Exception e)
  {
   //out.print("資料庫驅動程式失敗");
  }

  try
  {
 Connection myconn=DriverManager.getConnection("jdbc:mysql://localhost/"+databasename+"?useUnicode=true&characterEncoding=utf-8","root","");
   
 Statement mysmt=myconn.createStatement();
 rs=mysmt.executeQuery(strsql);
 int fieldcount=rs.getMetaData().getColumnCount();
 //out.print("總欄位數:"+fieldcount+"<p>");
 for(int i=0;i<fieldcount;i++)
 {
   //out.print(rs.getMetaData().getColumnName(i+1)+"<p>");
 }
 rs.first();
 rs.last();
 int rowcount=rs.getRow();
 //out.print("總記錄數:"+rowcount+"<p>");

 if(rowcount==0)
 {
resultdata=new String[0][0];
 }
 else
 {
   resultdata=new String[rowcount][fieldcount];
   rs.beforeFirst();

   int j=0;
   while(rs.next())
   {
 for(int i=0;i<fieldcount;i++)
 {
resultdata[j][i]=rs.getString(i+1);
 }
 j++;
   }
   rs.close();
        myconn.close();
 }
  }
  catch(SQLException er)
  {
     //out.print("資料庫管理系統無法啟動");
  }

  return resultdata;
 }
%>
jquerypost.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
</head>
<script language="javascript" src="jquery-1.8.0.js" ></script>
<script language="javascript">
$(document).ready(function()
{
$("#bt1").click(function()
{
$.post("jdata1.jsp",{id:$("#t1").val()},function(data,s)
{
$("#dv1").html(data); //html把資料加入div一列，如用append則附加在後
});
});
$("#bt2").click(function()
{
$("#t1").val("");
$("#t1").focus();
});
});
</script>

<body>
<form id="f1" name="f1" method="post" >
<table id="tb1" width="300" border="2">
  <tr>
    <td>
    輸入編號；
    </td>
    <td>
    <input type="text" id="t1" name="t1" size="20" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="button" name="bt1" id="bt1" value="確認" />
   </td>
    <td>
      <input type="reset" name="bt2" id="bt2" value="清除" />
    </td>
  </tr>
</table>
</form>
<p>
<p>
<div id="dv1"  style="background-color:#9CF; width:300px; height:100px; overflow:scroll">

</div>
</body>
</html>


database
+ 選項
完整內容編號姓名生日血型學歷
編輯 編輯編輯 快速編輯複製 複製刪除 刪除p1002李四78/5/4B大學
編輯 編輯編輯 快速編輯複製 複製刪除 刪除p1003小玲85/6/6RH研究所
編輯 編輯編輯 快速編輯複製 複製刪除 刪除p1004羅大靈74/5/3A大學
編輯 編輯編輯 快速編輯複製 複製刪除 刪除p1005張小立82/5/13O高中
使用ajax

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ajax應用</title>
</head>
<script language="javascript" src="jquery-1.8.0.js" ></script>
<script language="javascript">
$(document).ready(function()
{
var table=document.getElementById("tb1");
var i=0;
$("#bt1").click(function()
{
$.ajax({
  type:"post",
  url:"jdata1.jsp",
  data:{id:$("#t1").val()},//送給url 參數
  dataType:"html",//可用伺服語言
  success:function(data)
  {
var tdata=data.split(" ");
   var tr=table.insertRow(i);//用來控被移除的列不再出現在div

for(var u=0;u<tdata.length-1;u++)
   {
 var td=tr.insertCell(u);
 td.innerHTML=tdata[u];
                     }
 var ttd=tr.insertCell(5);
 ttd.innerHTML="<a herf='javascript:;' onclick='fun(this)'>移除</a>";
 i++;
  }
});
});
$("#bt2").click(function()
{
$("#t1").val("");
$("#t1").focus();
});
});
function fun(x)
{
var i=x.parentNode.parentNode.rowIndex;
document.getElementById("tb1").deleteRow(i);
}
</script>

<body>
<form id="f1" name="f1" method="post" >
<table  width="300" border="2">
  <tr>
    <td>
    輸入編號；
    </td>
    <td>
    <input type="text" id="t1" name="t1" size="20" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="button" name="bt1" id="bt1" value="確認" />
   </td>
    <td>
      <input type="reset" name="bt2" id="bt2" value="清除" />
    </td>
  </tr>
</table>
</form>
<p>
<p>
<div id="dv1"  style="background-color:#9CF; width:300px; height:100px; overflow:scroll">
<table id="tb1" border="0" width="300">
</table>
</div>
</body>
</html>


張貼者： 於 沒有留言:

動態新增移除表格jquery


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>動態新增移除表格</title>
</head>
<script language="javascript" src="jquery-1.8.0.js" ></script>
<script language="javascript">
$(document).ready(function()
{
var table=document.getElementById("tb1");
var i=0;
$("#bt1").click(function()
{
$.post("jdata1.jsp",{id:$("#t1").val()},function(data,s)
{

//$("#dv1").html(data);
var tdata=data.split(" ");
   var tr=table.insertRow(i);

for(var u=0;u<tdata.length-1;u++)
   {
 var td=tr.insertCell(u);
 td.innerHTML=tdata[u];
                     }
 var ttd=tr.insertCell(5);
 ttd.innerHTML="<a herf='javascript:;' onclick='fun(this)'>移除</a>";
 i++;
});
});
$("#bt2").click(function()
{
$("#t1").val("");
$("#t1").focus();
});
});
function fun(x)
{
var i=x.parentNode.parentNode.rowIndex;即table
document.getElementById("tb1").deleteRow(i);
}
</script>

<body>
<form id="f1" name="f1" method="post" >
<table  width="300" border="2">
  <tr>
    <td>
    輸入編號；
    </td>
    <td>
    <input type="text" id="t1" name="t1" size="20" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="button" name="bt1" id="bt1" value="確認" />
   </td>
    <td>
      <input type="reset" name="bt2" id="bt2" value="清除" />
    </td>
  </tr>
</table>
</form>
<p>
<p>
<div id="dv1"  style="background-color:#9CF; width:300px; height:100px; overflow:scroll">
<table id="tb1" border="0" width="300">
</table>
</div>
</body>
</html>

jdata1.jsp

<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<%@include file="querydata.jsp"%>
<%
String[][] data=null;
String id=request.getParameter("id");
//String id="p1002";
String databasename="persondata";
String strsql="select * from person where 編號='"+id+"'";

data=querydatafun(databasename,strsql);
String str="";

if(data.length==0)
{
str="查無此資料";
}
else
{
for(int i=0;i<data.length;i++)
{
for(int j=0;j<data[0].length;j++)
{
str+=data[i][j]+" ";//加一空格方便split
}
}
}
out.print(str);
%>
張貼者： 於 沒有留言:

2012年8月26日 星期日

協調

在北訊上課已快結束了
進入專題
因本組合作關係
大家有點口角，只好拆組
因年紀因素把機會讓給年輕人去發揮
只有試一試一些功能
並複習之前所學
陸續把複習的課程貼上
一方面增強記憶
一方面留下分享他人


張貼者： 於 沒有留言:

jsp學習


//upload.jsp
<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<%@page import="com.jspsmart.upload.*"%>//去下載
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
</head>

<body>
<jsp:useBean id="tsu" scope="page" class="com.jspsmart.upload.SmartUpload"/>
<%
tsu.initialize(pageContext);//建立頁面容器初始化
tsu.setTotalMaxFileSize(10*1024*1024);//限制檔案容量
tsu.upload();//將檔案進行傳輸
String spath="./uploaddata";//決定儲存路徑
int filecount=tsu.save(spath);//將檔案存於指定路徑
%>
</body>
</html>
---------------------------
//寫檔writefile.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
</head>
<script language="javascript">
function fun1()
{
var file=document.getElementById("fl1").files[0];// 讀取檔案元素集合
var filename=file.name;//取得檔案名稱
var reader=new FileReader();//實際檔案讀取元件(檔案輸入輸出)
reader.readAsDataURL(file);//取得file的絕對路徑
reader.onload=function(e)//載入檔案
{
var timg=document.getElementById("sp1");
timg.innerHTML="<img src='"+this.result+"' width='300' height='250'/>";
}
}
</script>
<body>
<form id="f" name="f" method="post" action="upload.jsp" enctype="multipart/form-data">
<input type="file" id="fl1" name="fl1" />
    <br />
    <input type="button" id="bt1" name="bt1" value="確定" onclick="fun1()"/>
    <input type="submit" id="s1" name="s1" value="傳送" />
       <p>
    <span id="sp1"></span>
</form>
</body>
</html>

----------------------------
//載入檔案htmlfile.html

<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
</head>
<script language="javascript">
function fun1()
{
var file=document.getElementById("fl1").files[0];// 讀取檔案元素集合

var filename=file.name;//取得檔案明稱

var reader=new FileReader();//實際檔案讀取元件(檔案輸入輸出)
reader.readAsDataURL(file);//取得file的絕對路徑

reader.onload=function(e)//載入檔案
{

var timg=document.getElementById("sp1");
timg.innerHTML="<img src='"+this.result+"' width='300' height='250'/>";
}
}
</script>
<body>



<form id="f" name="f" method="post" >
<input type="file" id="fl1" name="fl1" />
    <br />
    <input type="button" id="bt1" name="bt1" value="確定" onclick="fun1()"/>

    <p>
    <span id="sp1"></span>
</form>
</body>
</html>

張貼者： 於 沒有留言:
訂閱： 意見 (Atom)