zoukankan      html  css  js  c++  java
  • “图片”--预览

    1、jsp页面选择图片,并预览(可控制图片大小)

    html代码:

    <li><span>图片</span><input type="file" name="image" id="image" tabindex="5" onchange="save()"/></li>
    <span id="localImag"><img id="preview" style="200px;height:220px;diplay:none" src="/second/images/${image }"/></span>

    js代码:

            function save(){ 
                    var docObj=document.getElementById("image"); 
                    var imgObjPreview=document.getElementById("preview"); 
                    if(docObj.files && docObj.files[0]){ 
                        //火狐下,直接设img属性 
                        imgObjPreview.style.display = 'block'; 
                        imgObjPreview.style.width = '200px'; 
                        imgObjPreview.style.height = '220px'; 
                        //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("localImag"); 
                        //必须设置初始大小
                        localImagId.style.width = "200px"; 
                        localImagId.style.height = "200px"; 
                        //图片异常的捕捉,防止用户修改后缀来伪造图片 
                    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; 
                    } 

    效果图:

  • 相关阅读:
    百度之星 预赛002 大数问题+斐波那契数列
    L2-005. 集合相似度
    L2-008. 最长对称子串 (有个知识点没看)
    L1-1. 这是一道简单题
    L1-3. 这道真是简单题
    java实现的加密解密
    应用实现国际化的做法
    SAX解析器
    JFrame绝对布局
    配置Tomcat启用Https安全协议的访问
  • 原文地址:https://www.cnblogs.com/Crysta1/p/6178959.html
Copyright © 2011-2022 走看看