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>

      运行:

      

  • 相关阅读:
    简单的小工具wordlight——让VS变量高亮起来
    Net连接mysql的公共Helper类MySqlHelper.cs带MySql.Data.dll下载
    ECshop 快捷登录插件 支持QQ 支付宝 微博
    设为首页 和 收藏本站js代码 兼容IE,chrome,ff
    PHP获取图片宽度高度、大小尺寸、图片类型、用于布局的img属性
    使用ZeroClipboard解决跨浏览器复制到剪贴板的问题
    Bootstrap3.0学习第二十六轮(JavaScript插件——图片轮播)
    Bootstrap3.0学习第二十五轮(JavaScript插件——折叠)
    Bootstrap3.0学习第二十四轮(JavaScript插件——按钮)
    Bootstrap3.0学习第二十三轮(JavaScript插件——警告框)
  • 原文地址:https://www.cnblogs.com/liaoshiqi/p/6186786.html
Copyright © 2011-2022 走看看