HTML5 原生API input file 来实现多图上传，并大图预览

闲来无事，突然想用原生来实现图片的多图上传。

一、效果图大致如下：

1、上传时可以选择多图

2、上传之后缩略图下过图如下：

3、点击缩略图，大图展示当前所点击的图片，并可以左右滑动查看其它的缩略图对应的大图。效果如下：

4、点击删除，弹出是否要删除的弹框，点击确定后，删除。效果图如下：

 

二、要求

1、限制图片的张数（4张）

2、限制单个图片的大小（1M）

3、支持拖拽上传

4、上传后显示小图预览

5、点击小图进行大图预览

6、实现agax上传

三、所需插件

1、由于时间原因，页面布局依赖于bootstrap

2、滚动插件用的swiper.js

3、弹框差价layer

四、页面布局

4-1、缩略效果图如下：

4-2、缩略图的HTML代码如下：

<form action="post" class="vaildform fmreset" enctype="multipartform-data">
        <div class="form-group clearfix">
            <label class="col-lg-2  col-md-2 col-sm-2 control-label" for="userName">图册</label>
            <div class="col-lg-10 col-md-10 col-sm-10 clearfix">
                <!-- 图片展示 -->
                <div class="atlas-container pull-left clearfix">
                    <div class="atlas-content">
                        <i class="js-del-img fm-icon ion-close-circled"></i>
                        <div class="img-container">
                            <img src=/assets/images/logbg.png alt="图册" />
                        </div>
                    </div>
                </div>
                <!-- 图片上传 -->
                <div class="upload-container pull-left">
                    <input id="fileUpload" type="file" name="" value="" multiple accept="image/png,image/gif,image/jpg,image/jpeg" />
                    <div class="fileUpload"></div>
                </div>
            </div>
        </div>
        <div class="form-group clearfix">
            <label class="col-lg-2  col-md-2 col-sm-2 control-label" for="userName"></label>
            <div class="col-lg-10 col-md-10 col-sm-10">
                <a id="js-submit" href="javascript:;" class="btn btn-primary">提交</a>
            </div>
        </div>
    </form>

我们知道form表单要实现文件上传 form标签上必须有“enctype="multipartform-data"”这个属性，上传类型为post，实现文件上传的空间就是

<input id="fileUpload" type="file" name="" value=""/>

　1、这是一句图片文件上传的控件，可我们想要实现图片上传，就要限制文件的类型，使用属性“accept”，accept="image/png,image/gif,image/jpg,image/jpeg"，这句话用来限制图片的类型，这里列举的类型不多，大家可以根据自己的需要调整。当然你也可以写成“accept="image/*"”,不过这样写的话，点击上传，出现选择文件的框会出现很慢。

　2、有的同学会发现，这样写只能一次上传一张图片，大家别急，当我们给这个控件加上“multiple ”这个属性后就能实现多图上传啦。详细上传控件如下：

 <input id="fileUpload" type="file" name="" value="" multiple accept="image/png,image/gif,image/jpg,image/jpeg"/>

4-3、缩略图的css布局如下：

// 图册容器
.atlas-container{}
.atlas-container .atlas-content{
    margin-left:15px;
    float: left;
    position: relative;
}
.atlas-container .atlas-content .img-container{
    width:115px;
    height:115px;
    background:@white;
    padding:5px;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box; /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox; /* 混合版本语法: IE 10 */
    display: -webkit-flex; /* 新版本语法: Chrome 21+ */
    display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
    -webkit-box-pack: center; /*子元素水平居中*/
    -moz-justify-content: center; /*子元素水平居中*/
    -webkit-justify-content: center;/*子元素水平居中*/
    justify-content: center; /*子元素水平居中*/
    -webkit-box-align: center;/*子元素交叉轴对齐方式*/
    -moz-align-items: center;/*子元素交叉轴对齐方式*/
    -webkit-align-items: center;/*子元素交叉轴对齐方式*/
    align-items: center;/*子元素交叉轴对齐方式*/
    cursor:pointer;
    position:relative;
}
.atlas-container .atlas-content .img-container img{
    max-width:100%;
    max-height:100%;
    display:block;
}
.atlas-container .atlas-content .fm-icon{
    cursor:pointer;
    font-size: 16px;
    right: -11px;
    top: -14px;
    position: absolute;
    color: rgba(0,0,0,.5);
    z-index:2;
}
.atlas-container .atlas-content .fm-icon:hover{color:rgba(0,0,0,.7);}
// 上传容器
.upload-container{
    width:120px;
    height:120px;
    margin-left:15px;
    overflow:hidden;
    position: relative;
}
#fileUpload{
    width:100%;
    height:100%;
    top:0;
    left:0;
    right:0;
    bottom:0;
    opacity:0;
    cursor:pointer;
    position:absolute;
    z-index:2;
}
.upload-container .fileUpload{
    width:100%;
    height:100%;
    cursor:pointer;
    background:@white;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    -o-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    position: relative;
}
.upload-container .fileUpload:before{
    content:"";
    width:32px;
    height:2px;
    background:#cbcbcb;
    top:50%;
    left:50%;
    margin-left:-16px;
    margin-top:-1px;
    position: absolute;
}
.upload-container .fileUpload:after{
    content:"";
    width:2px;
    height:32px;
    background:#cbcbcb;
    top:50%;
    left:50%;
    margin-left:-1px;
    margin-top:-16px;
    position: absolute;
}

4-4、大图HTML布局如下：

<div class="picture-preview">
    <div class="swiper-container">
        <!-- 轮播盒子 -->
        <div class="swiper-wrapper">
        </div>
        <!-- 前进后退按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        <!-- 分页器 -->
        <div class="swiper-pagination"></div>
    </div>
</div>

4-5、大图对应的css样式如下：

// 大图预览
.picture-preview{display:none;max-height:100%;}
.picture-preview .preview-container{
    display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box; /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox; /* 混合版本语法: IE 10 */
    display: -webkit-flex; /* 新版本语法: Chrome 21+ */
    display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
    -webkit-box-pack: center; /*子元素水平居中*/
    -moz-justify-content: center; /*子元素水平居中*/
    -webkit-justify-content: center;/*子元素水平居中*/
    justify-content: center; /*子元素水平居中*/
    -webkit-box-align: center;/*子元素交叉轴对齐方式*/
    -moz-align-items: center;/*子元素交叉轴对齐方式*/
    -webkit-align-items: center;/*子元素交叉轴对齐方式*/
    align-items: center;/*子元素交叉轴对齐方式*/
    height:100%;
}
.picture-preview .preview-container img{
    max-width:100%;
    max-height:100%;
    display:block;
}

5、js逻辑编写

随着和html5的普及，file的各种API越来越强大，HTML5 file 的API返回了很多有用的图片信息，我们可以利用这些信息来实现图片的预览效果。

1、我们可以在控制台上打印出我们要上传的图片信息：

 里面包含“length”->当前上传的图片个数；"lastModified"->最后的更改；“name”->图片的名字；"size"->图片的大小,"type"->图片的类型

5-1，图片上传功能

1、缩略图上传

imgUpload:function(){
        var fileUpload = document.getElementById("fileUpload");         //得到图片的上传控件
        fileUpload.addEventListener('change',uploadFile,false);         // 监听上传控件
        var length=0;               // 监听图片的个数
        var size=0;                 // 监听单个图片的大小
        var url='';                 // 用来保存图片的位置
        var atlasContent = $('.atlas-container').find('.atlas-content'); 
        if(atlasContent){
            length = atlasContent.length;
            mainCtrl.picInit();           // 初始化大图容器
        }
        // 图片上传事件
        function uploadFile(){
            var files = this.files;                 // 得到files
            var lengthN =parseInt(files.length);    // 保存当前上传的个数
            length+=lengthN;                        // 图片个数
            if(length>4){                           // 图片上传超过四个
                layer.msg('图片个数不能超过4个',function(){
                    fileUpload.value='';            // 清空当前的上传控件，
                    length=length-lengthN;          // 图片未添加，length回到原先的状态
                });
                return;                             // 终止程序
            }
            
            for(var i=0;i<lengthN;i++){             // 遍历当前的上传的个数，
                size= files[i].size;                // 得到单个图片的大小
                if(size>1024*1024){                 // 单个图片大于1M
                    layer.msg(files[i].name+'这张图片大于1M',function(){      // 提示哪张图片的大小超出1M
                        fileUpload.value='';        // 清空当前的上传控件，
                        length=length-lengthN;      // 图片未添加，length回到原先的状态
                    });
                    return;
                }else{ 
                    var html='';                            // 缩略图
                    var bigHtml='';                         // 大图                             // 终止程序
                    url = window.URL.createObjectURL(files[i]);    // 方法会根据传入的参数创建一个指向该参数对象的URL. 这个URL的生命仅存在于它被创建的这个文档里. 新的对象URL指向执行的File对象或者是Blob对象.
                    html+='<div class="atlas-content">';
                    html+='<i class="js-del-img fm-icon ion-close-circled"></i>';
                    html+='<div class="img-container" data-name="'+files[i].name+'">';
                    html+='<img src='+url+' alt="图册"/>';
                    html+='</div>';
                    html+='</div>'; 
                    bigHtml+='<div class="swiper-slide">';
                    bigHtml+='<div class="preview-container">';
                    bigHtml+='<img src='+url+' alt="图册"/>';
                    bigHtml+='</div>';
                    bigHtml+='</div>';
                    $('.atlas-container').append(html);                     // 将缩略图片写入
                    $('.picture-preview .swiper-wrapper').append(bigHtml);  // 将大图写入
                }
            }
            
            if(length===4){
                $('.upload-container').hide();          // 图片上传控件隐藏
            }

            // 删除图片
            $('.atlas-container').on('click','.js-del-img',function(){
                var index = $(this).index();
                var _this = this;
                var picName = $(this).next('.img-container').data('name');
                layer.confirm('确定删除 '+picName+' 这张图片？', 
                    {
                        btn: ['确定','取消'] //按钮
                    }, 
                    function(){
                        $(_this).parent('.atlas-content').remove();              // 缩列图删除
                        mainCtrl.picInit();             // 重新渲染
                        length--;
                        if(length<0){length=0;}
                        $('.upload-container').show();          // 图片上传控件显示
                        layer.msg('删除成功', {icon: 1,time:1000});
                    }, 
                    function(index){
                        layer.close(index);
                    }
                );
            })
        };
    },

// 大图初始化
    picInit:function(){
        var thumbnailObj = $('.atlas-container').find('.atlas-content');
        var picLength = thumbnailObj.length;
        var picHtml='';
        var thumbnailImgSrc='';
        for(var i=0;i<picLength;i++){
            thumbnailImgSrc = thumbnailObj.eq(i).find('img').attr('src');
            picHtml+='<div class="swiper-slide">';
            picHtml+='<div class="preview-container">';
            picHtml+='<img src='+thumbnailImgSrc+' alt="图册"/>';
            picHtml+='</div>';
            picHtml+='</div>';
        }
        $('.picture-preview .swiper-wrapper').empty().append(picHtml);
    },

注意:由于大图和小图不在同一个容器里，所以在缩略图改变的时候，要及时更新大图的容器

2、点击缩略图初始化swiper插件（注意：一定要在layer的success函数里初始化，不然容易swiper比layer初始化快，swiper就不起作用了）

picturePreview:function(){
        $('.atlas-container').on('click','.img-container',function(){
           var key = $(this).parent('.atlas-content').index(); // 保存当前小图的索引值
            layer.open({
                type: 1,
                shade: true,
                shadeClose:true,
                area: ['100%', '100%'],
                scrollbar:false,
                title: ['相册大图预览', 'font-size:22px;text-align:center'], 
                content: $('.picture-preview'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                success:function(){
                    mainCtrl.pictureCarousel(key);
                },
                cancel: function(index){
                    layer.close(index);
                }
            });
        });
    },

3、swiper滚动初始化

pictureCarousel:function(key){
        $('.picture-preview .swiper-container .swiper-wrapper').height($(window).height()-48);  // 42是弹框标题的高度
        $(window).resize(function(){            // 监听浏览器大小的变化
            $('.picture-preview .swiper-container .swiper-wrapper').height($(window).height()-48);  // 42是弹框标题的高度
        })
        var picSwiper = new Swiper('.picture-preview .swiper-container', {
                pagination : '.picture-preview .swiper-pagination',
                initialSlide:key,                       // 起始页设置 
                slidesPerView: 1,                       // 只显示1个
                paginationClickable:true,               // 点击分页器的指示点分页器会控制Swiper切换
                autoplay: 2000,                         // 可选选项，自动滑动
                autoplayDisableOnInteraction:false,     // 用户操作后还可以自动切换
                grabCursor:true,                        // 小手形状
                paginationClickable:true,               // 分页器
                lazyLoading:true,                       // 懒加载
                loop:true,                              // 循环
                // prevButton:'.picture-preview .swiper-button-prev',
                // nextButton:'.picture-preview .swiper-button-next',
            });
        $('.picture-preview .swiper-container').hover(function(){
            picSwiper.stopAutoplay();                   // 鼠标移入禁止自动切换
        },function(){
            picSwiper.startAutoplay();                  // 鼠标移出开启自动切换
        })
        $('.picture-preview .swiper-button-prev').click(function(){         // 上一页
            picSwiper.slidePrev();
        })
        $('.picture-preview .swiper-button-next').click(function(){         // 下一页
            picSwiper.slideNext();
        })
    },

后续：
4-5，拖拽上传

4-6、图片编辑剪切

4-7、图片编辑旋转

4-8、图片编辑大小

4-9、显示图片上传进度

4-10、终止、开始图片上传