现在的位置: 首页 > 综合 > 正文

jquery实现图片上传前的预览

2013年11月12日 ⁄ 综合 ⁄ 共 3192字 ⁄ 字号 评论关闭

说明:以下程序兼容IE 6 7 及FF。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>第三节</title>

<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="jquery-1.3.2.min.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>

抱歉!评论已关闭.