js前端实现多图图片上传预览的两个方法

2017-01-13 10:54:38来源:csdn作者:hj960511人点击

第七城市

一、将图片转成icon码的实现方式 html代码:

<div>
<input name="evidence" onchange="previewImage(this,5)" type="file"/>
<span></span>
</div>
<div>
<img src="" alt="" height="200" width="200"/>
</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><input type="file"name="file" multiple="multiple"onchange="javascript:setImagePreviews();" accept="image/*" /><div></div></div></body></html>

最后再给大家推荐一个源码网站,原创源码库,我感觉很不错,可以找到很多大部分的网站程序,很值得收藏。


第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台