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