多图片上传

来源：互联网发布：sql server 分组统计编辑：程序博客网时间：2024/06/15 12:14
HTML
<html>  <head>   <meta  charset="utf-8" />  <title>图片上传预览/删除</title>  <link rel="stylesheet" type="text/css" href="css/index.css">    </head>  <body>   <center>    <!-- 图片选择框 -->    <form>      <input type="file" onchange='PreviewImage(this)' />    </form>    <!-- 图片展示容器 -->    <div class="img-cont"></div>   </center>  <!-- js -->  <script  src="js/jquery-1.11.3.min.js"></script>  <script  src="js/index.js"></script> </body> </html>css   .img-cont{    width:1000px;    height:570px;    border:2px solid #317ef3;    margin:50px auto;  }  .img-cont>div{    width:300px;    height:260px;    border:1px solid #777;    float:left;    margin:20px 0 0 20px;  }  .img-cont>div>div{    width:300px;    height:220px;    border:1px solid red;  }  .img-cont>div>a{    width:60px;    height:30px;    border-radius:4px;    line-height: 30px;    text-align: center;    color:#fff;    display: block;    background: #317ef3;    margin:5px 0 0 0px;    cursor: pointer;  }  .hide{    display: none !important;  }js (别忘记引入jq)//定义上传方法函数var id="1";function PreviewImage(imgFile) {     var pattern = /(\.*.jpg$)|(\.*.png$)|(\.*.jpeg$)|(\.*.gif$)|(\.*.bmp$)/;          if(!pattern.test(imgFile.value)) {       alert("系统仅支持jpg/jpeg/png/gif/bmp格式的照片！");        imgFile.focus();     }else{       //定义图片路径        var path;       //添加显示图片的HTML元素       id += 1;       $(".img-cont").append("<div><div id='"+id+"'><img src='' /></div><a class='hide delete-btn'>删除</a></div>");       //判断浏览器类型       if(document.all){        //兼容IE        imgFile.select();         path = document.selection.createRange().text;        document.getElementById(id).innerHTML="";         document.getElementById(id).style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")";//使用滤镜效果        }else{        //兼容其他浏览器         path = URL.createObjectURL(imgFile.files[0]);        document.getElementById(id).innerHTML = "<img src='"+path+"' width='300' height='220' />";        }       //重置表单       resetForm(imgFile);     } }  //重置表单,允许用户连续添加相同的图片function resetForm(imgFile){  $(imgFile).parent()[0].reset();}//控制"按钮"显示与隐藏$(".img-cont").off("mouseenter","div").on("mouseenter","div",function(){    var that=this;    var dom=$(that).children("a");    dom.removeClass("hide");    //为点击事件解绑，防止重复执行    dom.off("click");    dom.on("click",function(){        //删除当前图片        dom.parent().remove();     });}).off("mouseleave","div").on("mouseleave","div",function(){    var that=this;    $(that).children("a").addClass("hide");})
阅读全文
0 0