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

1549年前 (2016-03-31)javaScript11595

  

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

本文原创,转载必追究版权。

分享给朋友:

相关文章

js限制input只能输入数字、英文、汉字

 1.只能输入数字和英文的:  <input onkeyup="value=value.replace(/[\W]/g,'') "...

MyEclipse 8.5 新建 基于Xfire的webservice

MyEclipse 8.5 新建 基于Xfire的webservice

 使用Xfire实现Web Services,作业应当包括相关的实现软件代码以及对应的WSDL。 MyEclipse 8.5,XFire 1.2.6,weblogic 11g/TomcatX...

freeMarker 截取字符串(操作字符串函数 )

<#if c.proSummary!?length gt 25>  <!-- 如果长度 >25 截取25个字-->    ...

freeMarker Jfinal 获取session里的值

问题:freeMaker session取值的常用格式都试过 session["xxx"],session.xxx 直接xxx 都取不出来?????解决:JFinal与Struts...

js/jquery 日历控件及实例下载

js/jquery 日历控件及实例下载

实现日历控件效果:页面:<link href="${base}/resource/${profile.path}/css/lhgcalendar.css" rel="...

org.apache.subversion.javahl.ClientException: The working copy needs to be upgraded svn: Working cop

org.apache.subversion.javahl.ClientException: The working copy needs to be upgraded svn: Working cop

SVN更新出现问题:org.apache.subversion.javahl.ClientException: The working copy needs to be upgraded svn: W...

评论列表

admin
admin
4年前 (2021-05-20)

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

发表评论

访客

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