js file上传图片并显示出来

1.首先给个img点击上传的图片,让input隐藏。并且定位到img地方;

2.div 传递的参数是input的id,input 展示传递的参数是div的id;

<form   action="#" style="width: 124px;position: absolute;top: 0;height: 90px;margin-left: 100px;margin-top: -10px;">                  

                            <div id="show1" οnclick="fileSelect('file')">
     <img class="img-bg" src="../image/resourceMg/dy_pic_upload.png"/>
     </div>
     <input id="file" type="file" name="" value="" οnchange="showImage(this,'show1');"/>  

                        </form>

js:

//-------------------文件图片上传
     function fileSelect(elementId){
     document.getElementById(elementId).click();
     }
     function showImage(file,id){
            var div = document.getElementById(id);


            if (file.files && file.files[0])
            {
                div.innerHTML ='<img id=img_'+id+'>';
                var img = document.getElementById('img_'+id);
                img.onload = function(){
                    img.width  =  "90";
                }
                var reader = new FileReader();
                reader.onload = function(evt){img.src = evt.target.result;}
                reader.readAsDataURL(file.files[0]);
            }
            else //兼容IE
            {
                var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
                file.select();
                var src = document.selection.createRange().text;
                div.innerHTML ='<img id=img_'+id+'>';
                var img = document.getElementById('img_'+id);
                img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
                var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
                div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
            }
        }


  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值