图片的多个上传

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

其结果显示为:


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

webjs--实现多图片的上传

HTML结构: 1 2 3 4 class="container">     请选择一个图像文件:      ...
  • dongmelon
  • dongmelon
  • 2017年06月15日 16:44
  • 332

js实现上传多个图片或者多个文件

主要是运用html5的    filereader可以参考  http://blog.csdn.net/yaoyuan_difang/article/details/38582697FileReade...
  • lu_tu_zhong
  • lu_tu_zhong
  • 2017年01月18日 18:13
  • 10469

ios AfNetWoring 上传多张图片

AFHTTPRequestOperationManager *manager=[AFHTTPRequestOperationManager manager];         //设置返回的数据解...
  • zhangbingcox
  • zhangbingcox
  • 2015年01月19日 16:50
  • 2000

利用formdata实现一个input 上传类型 上传多个图片

//实例化一个formData对象        var formData = new FormData();         //获取点击的文本框类型为file        var file...
  • LCRxxoo
  • LCRxxoo
  • 2017年04月28日 11:23
  • 4412

SpringMvc MultipartFile 多张图片文件上传

spring-servlet.xml             class="org.springframework.web.multipart.commons.CommonsMultipar...
  • qq_29246225
  • qq_29246225
  • 2016年08月24日 19:24
  • 5714

asp.net+swfupload 多图片批量上传(附源码下载)

asp.net的文件上传都是单个文件上传方式,无法执行一次性多张图片批量上传操作,要实现多图片批量上传需要借助于flash,通过flash选取多个图片(文件),然后再通过后端服务进行上传操作. ...
  • oupera
  • oupera
  • 2015年08月18日 16:26
  • 554

jsp页面通过ajax上传多张图片

pageEncoding="UTF-8"%> 总部后台系统             function upload(fileName)//这个方法可以限定上传图片的后缀       ...
  • one_isi_all
  • one_isi_all
  • 2015年06月23日 20:56
  • 3077

django 一次性上传多个文件, 批量上传

在用django 写文件上传的时候,从request.FILES['myfiles'] 获取到的文件始终只有一个, 但在HTML页面上明明用 HTML5 的 文件控件选择了多个文件,用的是CHROME...
  • WitsMakeMen
  • WitsMakeMen
  • 2014年03月10日 18:02
  • 9402

yii 上传多个图片

Yii的controller public function actionCreate(){ $model = new Advertising(); if(isset($_POST['Adv...
  • suixi2011
  • suixi2011
  • 2013年08月07日 14:01
  • 770

带参数的多张图片一起上传

使用AFN3.0上传带有参数的多张图片:首先有一个图片数组imageArr//遍历这个图片数组 for (UIImage *image in imageArray) {//将每张图片转化成data数据...
  • FreeTourW
  • FreeTourW
  • 2016年08月16日 17:05
  • 977
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:图片的多个上传
举报原因:
原因补充:

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