继续总结项目里的一些小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>
注:这里可以是图片(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>