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; 
                    } 

    效果图:

  • 相关阅读:
    待解决问题集锦
    蓝桥杯--- 历届试题 连号区间数(水题)
    蓝桥杯---历届试题 翻硬币 (水题)
    nyoj 678 最小K个数之和
    hdoj 2 括号配对问题【数组模拟实现+STL实现】
    hdoj 1016 Prime Ring Problem
    nyoj 62 笨小熊
    nyoj 47 过河问题
    nyoj 456 邮票分你一半
    nyoj 171 聪明的kk
  • 原文地址:https://www.cnblogs.com/Crysta1/p/6178959.html
Copyright © 2011-2022 走看看