zoukankan      html  css  js  c++  java
  • js上传和预览图片

    测试在IE8,FF12.0和谷歌chrome都能用!

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>By:DragonDean</title>
    <script type="text/javascript">
    //下面用于图片上传预览功能
    function setImagePreview(avalue) {
      var docObj=document.getElementById("doc");

      var imgObjPreview=document.getElementById("preview");
      if(docObj.files &&docObj.files[0])
      {
        //火狐下,直接设img属性
        imgObjPreview.style.display = 'block';
        imgObjPreview.style.width = '150px';
        imgObjPreview.style.height = '180px';

        //火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式
        imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
      }
      else
      {
        //IE下,使用滤镜
        docObj.select();
        var imgSrc = document.selection.createRange().text;
        var localImagId = document.getElementById("localImag");
        //必须设置初始大小
        localImagId.style.width = "150px";
        localImagId.style.height = "180px";
        //图片异常的捕捉,防止用户修改后缀来伪造图片
        try{
          localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
          localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
        }
        catch(e)
        {
          alert("您上传的图片格式不正确,请重新选择!");
          return false;
        }
        imgObjPreview.style.display = 'none';
        document.selection.empty();
      }
      return true;
    }

    </script>
    </head>
    <body>
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tbody>
          <tr>
            <td height="101" align="center">
              <div id="localImag">

                <img id="preview" src="http://pic.cnblogs.com/face/1023040/20160923152523.png" width="150" height="180" style="display: block; 150px; height: 180px;">

              </div>
            </td>
          </tr>
          <tr>
            <td align="center" style="padding-top:10px;">

              <input type="file" name="file" id="doc" style="150px;" onchange="javascript:setImagePreview();">

            </td>
          </tr>
        </tbody>
      </table>
    </body>
    </html>

      运行:

      

  • 相关阅读:
    复制
    rpm 软件包管理
    xfsdump 备份文件系统
    dhcp服务器(一)
    【转】kafka集群搭建
    postgresql主从配置
    centos7 安装配置postgresql
    centos7 安装配置zookeeper
    zookeeper
    piplinedb 安装配置
  • 原文地址:https://www.cnblogs.com/liaoshiqi/p/6186786.html
Copyright © 2011-2022 走看看