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

1548年前javaScript10535

  

  总之一句话, 可以先将 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>

相关文章

java版单商户开源商城系统推荐(含分销、支付。亲测成功)

java版单商户开源商城系统推荐(含分销、支付。亲测成功)

推荐一款java版单商户开源商城系统。后端基于 SpringBoot 框架。【前端】移动端使用 UniApp 框架,前后端分离开发,技术vue + element UI。代码地址: http...

java解析JSON 数组数据 实例

 public  static void main (String args[]){  String sJson ="[{'acceptTim...

java实现合并多个word文档 且可换页 实例代码(基于docx4j)

org.docx4j/docx4j/ Maven依赖写法Maven下载jar包<dependency>    <groupId>org.docx4...

get/post方式调用http接口

get/post方式调用http接口

 1. 项目环境如下:myeclipse8.5 、tomcat5.0/weblogic、xp、JDK:开发1.5,编译1.4为了方便,在原来的web项目UpDown中新建了一个httpcal...

表单用submit提交前增加校验

有时由于各种原因 input 必须用submit类型提交,在表单提交前增加校验。直接附代码 <HTML>      <he...

使用命令将本地项目上传至git

使用命令将本地项目上传至git

1.新建仓库,并获取git地址。2.找到本地的项目所在文件夹,鼠标右键git bash here,进入命令窗口。3.依次输入一下命令:git init      &nbs...

评论列表

阍者
2020-03-26 09:56:08

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

萨瓦迪卡 回复:
this指的是当前的input元素对象
2020-03-26 16:34:36
admin
2021-05-20 11:02:27

请问那个docObj是什么东西..还有那个docObj.files

萨瓦迪卡 回复:
docObj指的是files类型的input对象,docObj.files指的是上传的图片文件。您可以在html中查看到调用setImage()方法的input
2021-05-26 14:38:28

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。