一、将图片转成icon码的实现方式
html代码：
<div class="yanzright">
<input style="margin-top:5px;float: left;" id="st18" name="evidence" onchange="previewimage(this,5)" type="file"/>
<span class="dui" id="imgorder_dui" style="display: none;"></span>
</div>
<div id="preview5" style="margin-left:150px;clear:both; padding-top:15px;">
<img src="" alt="" id="imghead5" height="200" width="200" style="display:none;"/>
</div>
js代码
//图片预览功能
function previewimage(file,imgnum)
{
var maxwidth = 200;
var maxheight = 200;
var div = document.getelementbyid('preview'+imgnum);
if (file.files && file.files[0])
{
div.innerhtml ='<img id=imghead'+imgnum+'>';
var img = document.getelementbyid('imghead'+imgnum+'');
img.onload = function(){
var rect = 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';
}
var reader = new filereader();
reader.onload = function(evt){img.src = evt.target.result;}
reader.readasdataurl(file.files[0]);
}
else //
{
var sfilter='filter:progid:dximagetransform.microsoft.alphaimageloader(sizingmethod=scale,src="';
file.select();
var src = document.selection.createrange().text;
div.innerhtml = '<img id=imghead'+imgnum+'>';
var img = document.getelementbyid('imghead2');
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"+imgnum+" style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sfilter+src+"\"'></div>";
}
}
function clacimgzoomparam( maxwidth, maxheight, width, height ){
var param = {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);
return param;
}
二、使用js的另一种方法一次选中多个图片预览展示
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>测试页面</title>
<script type="text/javascript">
//下面用于多图片上传预览功能
function setimagepreviews(avalue) {
var docobj = document.getelementbyid("doc");
var dd = document.getelementbyid("dd");
dd.innerhtml = "";
var filelist = docobj.files;
for (var i = 0; i < filelist.length; i++) {
dd.innerhtml += "<div style='float:left' > <img id='img" + i + "' /> </div>";
var imgobjpreview = 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();
var imgsrc = document.selection.createrange().text;
alert(imgsrc)
var localimagid = 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("您上传的图片格式不正确，请重新选择!");
return false;
}
imgobjpreview.style.display = 'none';
document.selection.empty();
}
}
return true;
}
</script>
</head>
<body>
<div style="margin :0px auto; width:990px;">
<input type="file" name="file" id="doc" multiple="multiple" style="width:150px;" onchange="javascript:setimagepreviews();" accept="image/*" />
<div id="dd" style=" width:990px;"></div>
</div>
</body>
</html>