js/jquery 实现点击图片更换头像(图片)实例

  

  总之一句话, 可以先将 file类型 的input 隐藏 起来,通过 图片(头像)的onclick事件 来触发 file 的onclick事件。

1.引入外部js:

         <script src="${base}/resource/front/js/jquery.js" language="javascript" type="text/javascript" ></script>

2.html页面:

      <div id="div1"><img src="${photo!}" id="avatar" tapmode onclick="getPicture()"  style="cursor: hand"/></div>
     <input type="file" name="user.photo" onchange="setImage(this,div1,avatar);" id="photo" style="display: none"/>


3.JS部分:

<script type="text/javascript">

 function getPicture(){
    $("#photo").click();
    }

function setImage(docObj, localImagId, imgObjPreview) {
    var f = $(docObj).val();
    f = f.toLowerCase();
    var strRegex = ".bmp|jpg|jpeg$";
    var re=new RegExp(strRegex);
    if (re.test(f.toLowerCase())){
         //return true;
    }
    else{
        alert("请选择正确格式的图片");
         file = $("#photo");
         file.after(file.clone());
         file.remove();
        return false;
    }
    if (docObj.files && docObj.files[0]) {
        //火狐下,直接设img属性
        //imgObjPreview.style.display = 'block';
        //imgObjPreview.style.width = '140px';
        //imgObjPreview.style.height = '187px';
        //火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式  
        imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);

    } else {
        //IE下,使用滤镜
        docObj.select();
        var imgSrc = document.selection.createRange().text;
        //必须设置初始大小
        //localImagId.style.width = "140px";
        //localImagId.style.height = "187px";
        //图片异常的捕捉,防止用户修改后缀来伪造图片
        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>

本文由站长原创或收集,不代表本站立场,如若转载,请注明出处:http://www.swzhinan.com/post/83.html

共有 2 条评论

  1. avatar

    阍者

    请问这个setImage(this,div1,avatar)中的this指的是什么呢

    1. avatar

      萨瓦迪卡

      @阍者 this指的是当前的input元素对象

回复给

欢迎点评

联系我们

站长QQ:384827360

站长邮件:384827360@qq.com

工作时间:周一至周五,9:30-15:30,节假日休息

QR code