首页 > Web开发 > 详细

js实现上传图片回显功能

时间:2017-03-31 16:45:13      阅读:406      评论:0      收藏:0      [点我收藏+]

用到h5技术

                    <img id="headimg" src="<%=path%>/resources/images/icon4.png" style="cursor:pointer;" height="90px;" width="95%;">
                    <input id="headurladd" type="file" name="headUrl1" onchange="readFile(this)" style="display: none;" />
                    <input type="hidden" name="headUrl" id="logo" value="" />

js如下:

$("#headimg").click(function(){
    addhead(‘headurladd‘);
});
function addhead(obj){
     $("#"+obj).click();
}

function readFile(obj){
    var file = obj.files[0];
    //判断类型是不是图片  
   /*  if(!/image\/\w+/.test(file.type)){     
            alert("请确保文件为图像类型");   
            return false;
    }    */
    var reader = new FileReader();
    
    reader.readAsDataURL(file);
    reader.onload = function(e){
        var imgBase64Data =encodeURIComponent(e.target.result);
        $("#headimg")[0].src=this.result;
         var res = (this.result);
         var pos = imgBase64Data.indexOf("4")+4;
         imgBase64Data = imgBase64Data.substring(pos);
         
         $(‘#logo‘).val(imgBase64Data);
        
    } 
}

 

js实现上传图片回显功能

原文:http://www.cnblogs.com/wlxstyle/p/6651921.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!