您的位置:首页 > Web前端 > JavaScript

js file上传图片并显示出来

2017-08-16 16:44 501 查看
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" onclick="fileSelect('file')">
     <img class="img-bg" src="../image/resourceMg/dy_pic_upload.png"/>
     </div>
     <input id="file" type="file" name="" value="" onchange="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>";

            }

        }
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息