js前端实现多图图片上传预览的两个方法(推荐)
一、将图片转成icon码的实现方式
html代码：
<divclass="yanzRight"> <inputstyle="margin-top:5px;float:left;"id="st18"name="evidence"onchange="previewImage(this,5)"type="file"/> <spanclass="dui"id="imgOrder_dui"style="display:none;"></span> </div> <divid="preview5"style="margin-left:150px;clear:both;padding-top:15px;"> <imgsrc=""alt=""id="imghead5"height="200"width="200"style="display:none;"/> </div>
js代码
//图片预览功能
functionpreviewImage(file,imgNum)
{
varMAXWIDTH=200;
varMAXHEIGHT=200;
vardiv=document.getElementById('preview'+imgNum);
if(file.files&&file.files[0])
{
div.innerHTML='<imgid=imghead'+imgNum+'>';
varimg=document.getElementById('imghead'+imgNum+'');
img.onload=function(){
varrect=clacImgZoomParam(MAXWIDTH,MAXHEIGHT,img.offsetWidth,img.offsetHeight);
img.width=rect.width;
img.height=rect.height;
//img.style.marginLeft=rect.left+'px';
img.style.marginTop=rect.top+'px';
}
varreader=newFileReader();
reader.onload=function(evt){img.src=evt.target.result;}
reader.readAsDataURL(file.files[0]);
}
else//
{
varsFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
file.select();
varsrc=document.selection.createRange().text;
div.innerHTML='<imgid=imghead'+imgNum+'>';
varimg=document.getElementById('imghead2');
img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src=src;
varrect=clacImgZoomParam(MAXWIDTH,MAXHEIGHT,img.offsetWidth,img.offsetHeight);
status=('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
div.innerHTML="<divid=divhead"+imgNum+"style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
}
}
functionclacImgZoomParam(maxWidth,maxHeight,width,height){
varparam={top:0,left:0,width:width,height:height};
if(width>maxWidth||height>maxHeight)
{
rateWidth=width/maxWidth;
rateHeight=height/maxHeight;
if(rateWidth>rateHeight)
{
param.width=maxWidth;
param.height=Math.round(height/rateWidth);
}else
{
param.width=Math.round(width/rateHeight);
param.height=maxHeight;
}
}
param.left=Math.round((maxWidth-param.width)/2);
param.top=Math.round((maxHeight-param.height)/2);
returnparam;
}
二、使用js的另一种方法一次选中多个图片预览展示
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>测试页面</title>
<scripttype="text/javascript">
//下面用于多图片上传预览功能
functionsetImagePreviews(avalue){
vardocObj=document.getElementById("doc");
vardd=document.getElementById("dd");
dd.innerHTML="";
varfileList=docObj.files;
for(vari=0;i<fileList.length;i++){
dd.innerHTML+="<divstyle='float:left'><imgid='img"+i+"'/></div>";
varimgObjPreview=document.getElementById("img"+i);
if(docObj.files&&docObj.files[i]){
//火狐下，直接设img属性
imgObjPreview.style.display='block';
imgObjPreview.style.width='150px';
imgObjPreview.style.height='180px';
//imgObjPreview.src=docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
imgObjPreview.src=window.URL.createObjectURL(docObj.files[i]);
}
else{
//IE下，使用滤镜
docObj.select();
varimgSrc=document.selection.createRange().text;
alert(imgSrc)
varlocalImagId=document.getElementById("img"+i);
//必须设置初始大小
localImagId.style.width="150px";
localImagId.style.height="180px";
//图片异常的捕捉，防止用户修改后缀来伪造图片
try{
localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=imgSrc;
}
catch(e){
alert("您上传的图片格式不正确，请重新选择!");
returnfalse;
}
imgObjPreview.style.display='none';
document.selection.empty();
}
}
returntrue;
}
</script>
</head>
<body>
<divstyle="margin:0pxauto;width:990px;">
<inputtype="file"name="file"id="doc"multiple="multiple"style="width:150px;"onchange="javascript:setImagePreviews();"accept="image/*"/>
<divid="dd"style="width:990px;"></div>
</div>
</body>
</html>
以上这篇js前端实现多图图片上传预览的两个方法(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。