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、終止、開始圖片上傳