上传图片前预览的问题


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
   
    
    <title>My JSP 'xxx.jsp' starting page</title>
    
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">    
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
--><style type="text/css">
#previewDiv1
{
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}
#previewDiv2
{
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}
#previewDiv3
{
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}</style>
    <script type="text/javascript" src="js/jquery.js"></script>
  </head><body>
<table width="728" border="0" cellspacing="0" cellpadding="0">
 <tr>
      <td height="122" align="center" bgcolor="#FFFFFF"><table width="681" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="79" height="79" align="left" class="font04">第一张：</td>
            <td width="480" align="left" class="font07">
             <input type="file" name="file1" id="file1" size="59"></td>
            <td width="122" height="102" align="center" class="font07">
             <table width="102" border="0" cellpadding="0" cellspacing="1" bgcolor="#DCDCDC">
               <tr>
                <td width="100" height="100" align="center" valign="middle" bgcolor="#FFFFFF" id="previewDiv1"  />
              </tr>
            </table></td>
          </tr>
        </table>
          <table width="681" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="79" height="79" align="left" class="font04">第二张：</td>
              <td width="480" align="left" class="font07"><input type="file" name="file2" id="file2" size="59"></td>
              <td width="122" height="102" align="center" class="font07"><table width="102" border="0" cellpadding="0" cellspacing="1" bgcolor="#DCDCDC">
                  <tr>
                    <td width="100" height="100" align="center" valign="middle" bgcolor="#FFFFFF" id="previewDiv2"  />
                  </tr>
              </table></td>
            </tr>
          </table>
          <table width="681" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="79" height="79" align="left" class="font04">第三张：</td>
              <td width="480" align="left" class="font07"><input type="file" name="file3" id="file3" size="59"></td>
              <td width="122" height="102" align="center" class="font07"><table width="102" border="0" cellpadding="0" cellspacing="1" bgcolor="#DCDCDC">
                  <tr>
                    <td width="100" height="100" align="center" valign="middle" bgcolor="#FFFFFF" id="previewDiv3" />
                  </tr>
              </table></td>
            </tr>
          </table></td>
      </tr>
  </table>
</body><script type="text/javascript">    $(function()
    {
        $("input[type=file]").bind("change",function(event)
        {
   var fx = event.target.id.substr(4);
   var postfix = event.target.value.substring(event.target.value.lastIndexOf(".")+1);
    switch(postfix.toLowerCase()){
     case "jpg":
     case "gif":
     case "png":
     case "bmp":
     break;
        default:
      alert("请使用图片格式的文件！");
      break;
    }
   if ( $.browser.msie ){
    var newPreview = document.getElementById("previewDiv"+fx);
    newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src =event.target.value;
   }else{
    $("#previewDiv"+fx).css("background-image","url("+event.target.files[0].getAsDataURL()+")");
   }        });
    });
</script>
</html>这段代码是在网上找的，静态html直接打开选择图片可以预览，一部署到项目里面，通过域名访问，就显示不出图片来，请问有什么方法解决呢