File文件控件,选中文件(图片,flash,视频)即立即预览显示

王朝c#·作者佚名  2006-12-16
窄屏简体版  字體: |||超大  

继续总结项目里的一些小TIP,我们平常用file文件控件上传文件,要预览有时会刷新页面,结果file控件被清空,好多人问能能让他不清空或重新赋值,因为处于安全性的考虑,这是不可能的。那怎么进行无刷新预览呢?这里我把我所使用的方法写一下。选择页面:

<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('请选择正确的图片文件');

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>

&nbsp;&nbsp;注:这里可以是图片(jpg或gif格式),flash动画(swf)及视频文件(wmv,mpeg,asf,avi)。大小限定在1M以内。

</td>

<td>

<div id='previewImage'>当前页预览</div>

</td>

</tr>

</table>

弹出预览页面:

<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>

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航