图片的多个上传

原创 2015年11月18日 17:25:23



<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>
以上为图片的上传,本文有些地方摘自他人,以下的图片附件

其结果显示为:


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

ajaxfileupload.js+springMVC实现多个图片与数据同一个ajax方法上传

通过修改原始的ajaxFileUpload.js文件从而实现多图片以及json数据的上传。

JS实现动态添加图片上传,多个单图添加

HTML代码: 产品图组: 图推荐尺寸:376*376 第1张...

EasyUI file-box+SpringMVC 单个或多个图片上传

关于文件上传和下载网上有很多相关教程,但针对入门的新人来说大部分都不够详细,而且由于一直换工作的原因(主要是因为自己的懒惰)把这篇整理拖延了很久,终于在今天打算将它完成了……(此处应有鸡蛋)

利用zend framework的Zend_File_Transfer_Adapter_Http类实现多个图片的上传

1、首先,我们在页面上添加file控件,点击add按钮之后就可以多增加一个file。     <div style="float:l

图片上传时即时生成多个缩略图

图片上传时即时生成多个缩略图。

uploadify插件实现多个图片上传并预览

使用uploadify插件可方便实现图片上传预览功能。自带

PHP实例:上传多个图片并校验的代码

单张的图片上传是不复杂的,这里涉及到多张图片上传和对图片格式的校验,保证上传的一定是图片,防止上传其他文件到服务器。 基本实现算法是使用数组的形式,把所有的图片提交个一个数组,对数组的元素进...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)