javascript多图片上传imgFileupload

最新推荐文章于 2024-07-12 08:15:00 发布
SAPmatinal
最新推荐文章于 2024-07-12 08:15:00 发布
阅读量1.9k
点赞数
分类专栏： JAVA 其他技术
其他技术同时被 2 个专栏收录
146 篇文章 1 订阅
订阅专栏
JAVA
54 篇文章 0 订阅
订阅专栏
更多内容关注公众号：SAP Technical
<html lang="en"><head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
                *{
                    margin:0;padding:0;
                }
                html,body{
                     font-family:Arial,Helvetica,sans-serif;
                }
                li{
                    list-style: none;
                }
                img{
                    border:none;display: block
                }
                .box{
                    width: 1024px;margin: 50px auto;
                }
                .imgFileUploade{
                    width: 100%;padding: 10px;
                }
                .imgFileUploade .header{
                    height: 50px;width: 100%;line-height:50px;
                }
                .imgFileUploade .header span{
                    display: block;float:left;
                }
                .imgFileUploade .header span.imgTitle{
                    line-height:50px;
                }
                .imgFileUploade .header span.imgTitle b{
                    color:red;margin:0 5px;line-height: 57px;display: block;float: right;font-size: 20px;
                }
                .imgFileUploade .header span.imgClick{
                    width: 50px;height: 50px;margin-left: 10px;cursor: pointer;
                    background: url(../static/img/addUpload.png) no-repeat center center;background-size:cover; 
                }
                .imgFileUploade .header span.imgcontent{
                    color:#999;margin-left:120px;line-height: 50px;
                }
                .imgFileUploade .imgAll{
                    width: 100%;    margin-top: 5px;
                }
                .imgFileUploade .imgAll ul:after{ 
                        visibility: hidden;  display: block; font-size: 0; content: ".";  clear: both; height: 0
                } 
                .imgFileUploade .imgAll li{
                    width: 100px;height: 100px;border:solid 1px #ccc;margin:8px 5px;float: left;position: relative;box-shadow: 0 0 10px #eee;
                }
                .imgFileUploade .imgAll li img{
                    position: absolute;top:0;left:0;width: 100%;height: 100%;display: block;
                }
                .delImg{
                    position: absolute;top:-10px;right:-7px;width: 22px;height: 22px;background: #000;border-radius: 50%;display: block;text-align:  center;line-height: 22px;color:#fff;font-weight: 700;font-style:normal;cursor: pointer;
                }
                .box,.box2,.box3,.box4{
                    border:solid 1px #ccc;
                }
            </style>
        </head>
        <body style="">
        <div class="box">
        <div class="imgFileUploade"><input type="file" name="" id="" class="imgFiles" style="display: none" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" multiple=""><div class="header">    <span class="imgTitle">        精彩图库        <b>            *        </b>    </span>    <span class="imgClick">    </span>    <span class="imgcontent">请上传<b style="color:red">3</b>张5900 * 5800像素的图片</span></div><div class="imgAll">    <ul>    </ul></div></div></div>
        <div class="box2" style="width:700px;margin:50px auto"><div class="imgFileUploade"><input type="file" name="" id="" class="imgFiles" style="display: none" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" multiple=""><div class="header">    <span class="imgTitle">        精彩图库        <b>            *        </b>    </span>    <span class="imgClick">    </span>    <span class="imgcontent">请上传<b style="color:red">5</b>张1900 * 1800像素的图片</span></div><div class="imgAll">    <ul>    </ul></div></div></div>
        <div class="box3" style="width: 800px;margin:50px auto"><div class="imgFileUploade"><input type="file" name="" id="" class="imgFiles" style="display: none" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" multiple=""><div class="header">    <span class="imgTitle">        精彩图库        <b>            *        </b>    </span>    <span class="imgClick">    </span>    <span class="imgcontent">请上传<b style="color:red">3</b>张900 * 800像素的图片</span></div><div class="imgAll">    <ul>    </ul></div></div></div>
        <div class="box4" style="width: 900px;margin:50px auto"><div class="imgFileUploade"><input type="file" name="" id="" class="imgFiles" style="display: none" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" multiple=""><div class="header">    <span class="imgTitle">        精彩图库        <b>            *        </b>    </span>    <span class="imgClick">    </span>    <span class="imgcontent">请上传<b style="color:red">1</b>张900 * 800像素的图片</span></div><div class="imgAll">    <ul>    </ul></div></div></div>
        <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script><script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="../static/js/imgFileupload.js"></script>
        <script type="text/javascript">
                var imgFile = new ImgUploadeFiles('.box',function(e){
                    this.init({
                        MAX : 3, //限制个数
                        MH : 5800, //像素限制高度
                        MW : 5900, //像素限制宽度
                        callback : function(arr){
                            console.log(arr)
                        }
                    });
                });
                var imgFile1 = new ImgUploadeFiles('.box2',function(e){
                    this.init({
                        MAX : 5,
                        MH : 1800, //像素限制高度
                        MW : 1900, //像素限制宽度
                        callback : function(arr){
                            console.log(arr)
                        }
                    });
                });
                var imgFile3 = new ImgUploadeFiles('.box3',function(e){
                    this.init({
                        MAX : 3,
                        MH : 800, //像素限制高度
                        MW : 900, //像素限制宽度
                        callback : function(arr){
                            console.log(arr)
                        }
                    });
                });
                var imgFile4 = new ImgUploadeFiles('.box4',function(e){
                    this.init({
                        MAX : 1,
                        MH : 800, //像素限制高度
                        MW : 900, //像素限制宽度
                        callback : function(arr){
                            console.log(arr)
                        }
                    });
                });
                
            </script>
        
        </body></html>