1. 程式人生 > >js file上傳圖片並顯示出來

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" 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>";
            }
        }