提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

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

文件 图片 视频 显示 File 控件 选中 Flash
2023-06-13 09:14:09 时间
我们平常用file文件控件上传文件，要预览有时会刷新页面，结果file控件被清空，好多人问能能让他不清空或重新赋值，因为处于安全性的考虑，这是不可能的。那怎么进行无刷新预览呢？这里我把我所使用的方法写一下。
选择页面： 
复制代码代码如下:

<scriptlanguage="javascript">
functioncheckData()
{
varfileName=document.getElementById("FileUp").value;
if(fileName=="")
return;
//检查文件类型
varexName=fileName.substr(fileName.lastIndexOf(".")+1).toUpperCase()
if(exName=="JPG"||exName=="BMP"||exName=="GIF")
{
//document.getElementById("myimg").src=fileName;
document.getElementById("previewImage").innerHTML="<imgsrc=\""+fileName+"\"width=100height=100>";
}
else
if(exName=="SWF")
{
document.getElementById("previewImage").innerHTML="<embedsrc=\""+fileName+"\"width=\"100\"height=\"100\"quality=\"high\"bgcolor=\"#f5f5f5\"></embed>";
}
else
if(exName=="WMV"||exName=="MPEG"||exName=="ASF"||exName=="AVI")
{
varstrcode="<embedsrc=\""+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="";
}
}
functionopenwin()
{
window.open("addPreview.aspx","","height=300,width=345,top=100,left=100");
}
</script>

HTML代码：
复制代码代码如下:

<tableborder="0"cellpadding="0"cellspacing="0"width="100%"height="100%"ID="Table1">
<tr>
<tdwidth="255"height="100%"valign="middle">
<INPUTid="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>
<divid="previewImage">当前页预览</div>
</td>
</tr>
</table>

弹出预览页面：
复制代码代码如下:
<scriptlanguage="javascript">
functiongetstr()
{
varstrcode="";
varwidth=100;
varhigh=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;
varfileName=self.opener.document.getElementById("FileUp").value;
varexName=fileName.substr(fileName.lastIndexOf(".")+1).toUpperCase()
if(exName=="JPG"||exName=="BMP"||exName=="GIF")
{
//document.getElementById("myimg").src=fileName;
strcode="<imgsrc=\""+fileName+"\"width="+width+"height="+high+">";
}
else
if(exName=="SWF")
{
strcode="<embedsrc=\""+fileName+"\"width=\""+width+"\"height=\""+high+"\"quality=\"high\"></embed>";
}
else
if(exName=="WMV"||exName=="MPEG"||exName=="ASF"||exName=="AVI")
{
strcode="<embedsrc=\""+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>

显示：
复制代码代码如下:
<divid="showimg"></div>

相关文章