zoukankan      html  css  js  c++  java
  • 【Javascript Demo】无刷新预览所选择的图片

    1.效果如下,可测试

    2.代码如下

    <!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>无标题文档</title>
    <script type="text/javascript">
        //本地图片预览
                function setImagePreview(fieldupload, image, imagediv) {
                    var docObj = document.getElementById(fieldupload);
                    var imgObjPreview = document.getElementById(image);
                    if (docObj.files && docObj.files[0]) {
                        //火狐下,直接设img属性                        
                        imgObjPreview.style.display = 'block';
                        imgObjPreview.style.width = '150px';
                        imgObjPreview.style.height = '150px';
                        //imgObjPreview.src = docObj.files[0].getAsDataURL();      
                        //火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式        
                        imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
                    } else {
                        //IE下,使用滤镜                        
                        docObj.select();
                        var imgSrc = document.selection.createRange().text;
                        var localImagId = document.getElementById(imagediv);
                        //必须设置初始大小                        
                        localImagId.style.width = "150px";
                        localImagId.style.height = "150px";
                        //图片异常的捕捉,防止用户修改后缀来伪造图片
                        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>
    <div id="localImag"> <img id="preview" width="150px" height="150px"  src="http://images.cnblogs.com/cnblogs_com/yc-755909659/559257/o_%e6%9a%82%e6%97%a0%e5%9b%be%e7%89%87.gif" alt="" /></div>
    <div>
      <input type="file" onchange="javascript:setImagePreview('upload','preview','localImag');" id="upload" />
    </div>
    </body>
    </html>
  • 相关阅读:
    关于字符串转义的代码
    JAVA发布aar文件
    apache虚拟主机配置HTTPS
    font-face跨域办法
    Javascript数组方法(译)
    Python动态生成变量
    给AOP的after函数使用原函数局部变量
    stopImmediatePropagation的应用
    IE9或以上的浏览器flash值为空时,导致domready不触发
    html写法对gzip压缩率的影响
  • 原文地址:https://www.cnblogs.com/yc-755909659/p/3640801.html
Copyright © 2011-2022 走看看