File文件控件,選中文件(圖片,flash,視頻)即立即預(yù)覽顯示
選擇頁(yè)面:
<script language="javascript">
function checkData()
{
var fileName=document.getElementById("FileUp").value;
if(fileName=="")
return;
//檢查文件類型
var exName=fileName.substr(fileName.lastIndexOf(".")+1).toUpperCase()
if(exName=="JPG"||exName=="BMP"||exName=="GIF")
{
//document.getElementById("myimg").src=fileName;
document.getElementById("previewImage").innerHTML='<img src=\''+fileName+'\' width=100 height=100 >';
}
else
if(exName=="SWF")
{
document.getElementById("previewImage").innerHTML='<embed src=\''+fileName+'\' width=\'100\' height=\'100\' quality=\'high\' bgcolor=\'#f5f5f5\' ></embed>';
}
else
if(exName=="WMV"||exName=="MPEG"||exName=="ASF"||exName=="AVI")
{
var strcode='<embed src=\''+fileName+'\' border=\'0\' width=\'100\' height=\'100\' quality=\'high\' ';
strcode+=' autoStart=\'1\' playCount=\'0\' enableContextMenu=\'0\' type=\'application/x-mplayer2\'></embed>';
document.getElementById("previewImage").innerHTML=strcode;
}
else
{
alert("請(qǐng)選擇正確的圖片文件");
document.getElementById("FileUp").value="";
}
}
function openwin()
{
window.open("addPreview.aspx","","height=300,width=345,top=100,left=100");
}
</script>
HTML代碼:
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%" ID="Table1">
<tr>
<td width="255" height="100%" valign="middle">
<INPUT id="FileUp" style="WIDTH: 253px; HEIGHT: 22px" type="file" size="23" name="File1"
runat="server" onchange="checkData()"><br>
注:這里可以是圖片(jpg或gif格式),flash動(dòng)畫(swf)及視頻文件(wmv,mpeg,asf,avi)。大小限定在1M以內(nèi)。
</td>
<td>
<div id="previewImage">當(dāng)前頁(yè)預(yù)覽</div>
</td>
</tr>
</table>
彈出預(yù)覽頁(yè)面:
<script language="javascript">
function getstr()
{
var strcode="";
var width=100;
var high=100;
if(self.opener.document.getElementById("FileUp")!=null)
{
//strcode=self.opener.document.getElementById("previewImage").innerHTML;
width=self.opener.document.getElementById("lblWidth").innerText;
high=self.opener.document.getElementById("lblHigh").innerText;
var fileName=self.opener.document.getElementById("FileUp").value;
var exName=fileName.substr(fileName.lastIndexOf(".")+1).toUpperCase()
if(exName=="JPG"||exName=="BMP"||exName=="GIF")
{
//document.getElementById("myimg").src=fileName;
strcode='<img src=\''+fileName+'\' width='+width+' height='+high+' >';
}
else
if(exName=="SWF")
{
strcode='<embed src=\''+fileName+'\' width=\''+width+'\' height=\''+high+'\' quality=\'high\' ></embed>';
}
else
if(exName=="WMV"||exName=="MPEG"||exName=="ASF"||exName=="AVI")
{
strcode='<embed src=\''+fileName+'\' border=\'0\' width=\''+width+'\' height=\''+high+'\' quality=\'high\' ';
strcode+=' autoStart=\'1\' playCount=\'0\' enableContextMenu=\'0\' type=\'application/x-mplayer2\'></embed>';
}
}
if(self.opener.document.getElementById("txtADCode")!=null)
{
strcode=self.opener.document.getElementById("txtADCode").innerHTML;
}
if(strcode!="")
{
//window.alert(fileName);
document.getElementById("showimg").innerHTML=strcode;
}
}
</script>
顯示:
<div id="showimg"></div>
相關(guān)文章
比較簡(jiǎn)單的javascript實(shí)現(xiàn)input雙擊后可以編輯
比較簡(jiǎn)單的javascript實(shí)現(xiàn)input雙擊后可以編輯...2007-08-08(僅IE下有效)關(guān)于checkbox 三態(tài)
(僅IE下有效)關(guān)于checkbox 三態(tài)...2007-05-05Js密碼強(qiáng)度實(shí)時(shí)驗(yàn)證代碼
這款密碼強(qiáng)度實(shí)時(shí)驗(yàn)證代碼比較實(shí)用啊, 也比較簡(jiǎn)單,通過(guò)對(duì)輸入字符串的判斷,得知密碼的強(qiáng)度。2010-06-06js在不刷新的情況下動(dòng)態(tài)添加表格行[腳本之家強(qiáng)烈推薦]
這個(gè)功能一般用于,一些添加一些不確定的信息,由用戶自己添加,以前都是如果你添加了2個(gè)突然發(fā)現(xiàn)不夠,再點(diǎn)添加,就會(huì)發(fā)現(xiàn)原來(lái)的內(nèi)容被替換了,下面的代碼就不會(huì),比較不錯(cuò)2008-10-10js select 標(biāo)簽選定項(xiàng)的值獲取代碼
用js獲取當(dāng)前選定的select的值的函數(shù)2009-03-03一直復(fù)略了的一個(gè)問(wèn)題,關(guān)于表單重復(fù)提交
一直復(fù)略了的一個(gè)問(wèn)題,關(guān)于表單重復(fù)提交...2007-02-02js驗(yàn)證符合用戶體驗(yàn)的網(wǎng)頁(yè)表單特效
用CSS和JS設(shè)計(jì)的符合用戶體驗(yàn)的表單。大家可以在自己的網(wǎng)頁(yè)里面用用,自己感覺(jué)非常不錯(cuò)的一種效果。2008-10-10強(qiáng)效、方便的表單通用檢測(cè)JS 不錯(cuò)
強(qiáng)效、方便的表單通用檢測(cè)JS 不錯(cuò)...2007-01-01對(duì)textarea框的代碼調(diào)試,而且功能上使用非常方便,酷
對(duì)textarea框的代碼調(diào)試,而且功能上使用非常方便,酷...2006-06-06