关闭

图片的多个上传

68人阅读 评论(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" onchange="previewImage(this);">
      <span class="noimages-add fw-bg"></span>
                        </div>  
</body>     
</html>
以上为图片的上传,本文有些地方摘自他人,以下的图片附件

其结果显示为:


1
0

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:108次
    • 积分:21
    • 等级:
    • 排名:千里之外
    • 原创:2篇
    • 转载:0篇
    • 译文:0篇
    • 评论:1条
    文章分类
    文章存档