图片的多个上传

最新推荐文章于 2019-07-30 09:30:20 发布

lxh2828521

最新推荐文章于 2019-07-30 09:30:20 发布

阅读量264

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/lxhui2828/article/details/49909977

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<html >

<head>

<title>图片上传本地预览</title>
<style type="text/css">
.preview{width:160px;height:122px;border:1px solid #eee;float:left;margin:5px 5px;}
.imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}
body, html {
font-family: "microsoft yahei",sans-serif;
}
#span{
top:122px;
width: 160px;
height:20px;
font-size:12px;
align:center;
}
/**按钮*/
.noimages {
top:5px;
left:5px;
height: 132px;
width: 160px;
border: 1px dashed #c8c8c8;
background-color: #fafafa;
position: relative;
border-radius: 3px;
overflow: hidden;
cursor: pointer;
margin-right: 24px;}
.noimages:hover{
background-color:#eee;
}
.noimages-file {
opacity: 0;
height: 122px;
width: 160px;
overflow: hidden;
cursor: pointer;
position: relative;
z-index: 1;
}
.noimages-add {
height: 52px;
width: 52px;
border-radius: 500%;
background-color: #fff;
position: absolute;
left: 50%;
top: 50%;
margin-left: -26px;
margin-top: -26px;
z-index: 0;
text-align:center;
background-position: -200px -288px;
}
.noimages .noimages-add{
background-position: -200px -288px;
}

.fw-bg{
background: url(js.png) no-repeat;
}
</style>
<script type="text/javascript">

var i=1;
//图片上传预览 IE是用了滤镜。
function previewImage(file)
{
var str=event.srcElement.value;
str = str.substr(str.lastIndexOf('\\')+1)
if (findImage(str)){
alert("图片已存在!");
return;
}
var MAXWIDTH = 160;
var MAXHEIGHT = 122;
var div = document.createElement('div');
div.setAttribute("id","preview"+i);
div.setAttribute("class","preview");
div.style.height=MAXHEIGHT;
div.style.width=MAXWIDTH;
var old = document.getElementById('imagesList');

if (file.files && file.files[0])
{
old.appendChild(div);
div.innerHTML ="<img id=imghead"+i+" class='imghead'/>"
//图片的名称
var name= document.createElement('div');
name.innerHTML = "<span id=span>"+str+"</span>";
div.appendChild(name);
var img = document.getElementById("imghead"+i);

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';
img.title = str;
name.style.marginTop=rect.nametop;
}

var reader = new FileReader();
reader.onload = function(evt){img.src = evt.target.result;}
reader.readAsDataURL(file.files[0]);
i++;
}
else //兼容IE
{

var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
file.select();
var src = document.selection.createRange().text;
div.innerHTML += "<img id=imghead+i class='imghead'>";
var img = document.getElementById('imghead'+i);
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>";
i++;
}
}
function clacImgZoomParam( maxWidth, maxHeight, width, height ){
//改变图片的大小
var param = {top:0, left:0, width:width, height:height,nametop:0};
if( width>maxWidth || height>maxHeight )
{
rateWidth = width / maxWidth;
rateHeight = height / maxHeight;

if( rateWidth > rateHeight )
{
param.width = maxWidth;
param.height = Math.round(height / rateWidth);
param.nametop=(maxHeight-param.height)/2;
}else
{
param.width = Math.round(width/rateHeight);
param.height = maxHeight;
}

}
if( width<maxWidth && height<maxHeight ){
param.left = maxWidth - param.width;
param.top = maxHeight - param.height;
}

param.left = Math.round((maxWidth - param.width) / 2);
param.top = Math.round((maxHeight - param.height) / 2);

return param;

}
function findImage(fn)
{
var o = document.getElementById("imagesList").getElementsByTagName('img');
for(var i=0;i<o.length;i++)
if (o[i].title == fn) return true;
return false;
}
</script>
</head>
<body>


<div id="imagesList"></div>
<div class="noimages" style="height:122px;">
<input type="file" multiple="multiple" accept="image/gif, image/jpeg, image/jpg, image/png" class="noimages-file" οnchange="previewImage(this);">
<span class="noimages-add fw-bg"></span>
</div>
</body>
</html>
以上为图片的上传，本文有些地方摘自他人，以下的图片附件

其结果显示为：