File file control, select file (picture, flash, video) and preview and display immediately

We usually use file file control to upload files. Sometimes the page will be refreshed if we want to preview it. As a result, the file control is cleared. Many people ask how it can prevent it from being cleared or reassigned, because it is impossible for security considerations. So how to perform a refresh-free preview? Here I will write down the method I used.
Select page:

Copy the codeThe code is as follows:

<script language="javascript"> 
function checkData() 
{ 
var fileName=("FileUp").value; 
if(fileName=="") 
return; 
//Check file type
var exName=((".")+1).toUpperCase() 
if(exName=="JPG"||exName=="BMP"||exName=="GIF") 
{ 
//("myimg").src=fileName; 
("previewImage").innerHTML='<img src=\''+fileName+'\' width=100 height=100 >'; 
} 
else 
if(exName=="SWF") 
{ 
("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>'; 
("previewImage").innerHTML=strcode; 
} 
else 
{ 
alert("Please select the correct image file");
("FileUp").value=""; 
} 
} 
function openwin() 
{ 
("","","height=300,width=345,top=100,left=100"); 
} 
</script>

HTML code:

Copy the codeThe code is as follows:

<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%" ID="Table1"> 
<tr> 
<td width="255" height="100%" valign="middle"> 
<INPUT  style="WIDTH: 253px; HEIGHT: 22px" type="file" size="23" name="File1" 
runat="server" onchange="checkData()"><br> 
Note: Here you can be pictures (jpg or gif format), flash animation (swf) and video files (wmv, mpeg, asf, avi).  The size is limited to less than 1M.
</td> 
<td> 
<div >Current page preview</div>
</td> 
</tr> 
</table> 

The preview page pops up:

Copy the codeThe code is as follows:

<script language="javascript"> 
function getstr() 
{ 
var strcode=""; 
var width=100; 
var high=100; 
if(("FileUp")!=null) 
{ 
//strcode=("previewImage").innerHTML; 
width=("lblWidth").innerText; 
high=("lblHigh").innerText; 
var fileName=("FileUp").value; 
var exName=((".")+1).toUpperCase() 
if(exName=="JPG"||exName=="BMP"||exName=="GIF") 
{ 
//("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(("txtADCode")!=null) 
{ 
strcode=("txtADCode").innerHTML; 
} 
if(strcode!="") 
{ 
//(fileName); 
("showimg").innerHTML=strcode; 
} 
} 
</script> 

show:

Copy the codeThe code is as follows: