上传文件时选中文件(图片、flash、视频)立即预览显示

很多人问：在上传图片文件时，在上传之前怎么进行无刷新预览呢？这里我把我所使用的方法写一下，包括了flash和视频文件，代码如下。

选择页面JS代码：
<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="";
        }
     }

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

 

如此简单而已！