當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

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

發布時間：2024/1/18 HTML 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 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表單要實現文件上傳 form標簽上必須有“enctype="multipartform-data"”這個屬性，上傳類型為post，實現文件上傳的空間就是

　1、這是一句圖片文件上傳的控件，可我們想要實現圖片上傳，就要限制文件的類型，使用屬性“accept”，accept="image/png,image/gif,image/jpg,image/jpeg"，這句話用來限制圖片的類型，這里列舉的類型不多，大家可以根據自己的需要調整。當然你也可以寫成“accept="image/*"”,不過這樣寫的話，點擊上傳，出現選擇文件的框會出現很慢。

　2、有的同學會發現，這樣寫只能一次上傳一張圖片，大家別急，當我們給這個控件加上“multiple ”這個屬性后就能實現多圖上傳啦。詳細上傳控件如下：

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布局如下：

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; // 得到filesvar 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){ // 單個圖片大于1Mlayer.msg(files[i].name+'這張圖片大于1M',function(){ // 提示哪張圖片的大小超出1MfileUpload.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、終止、開始圖片上傳

轉載于:https://www.cnblogs.com/zuoan-oopp/p/6802932.html

總結

以上是生活随笔為你收集整理的HTML5 原生API input file 来实现多图上传，并大图预览的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：灵敏度分享码显示服务器不可用,和平精英灵
下一篇： JAVA商城 B2B2C商城系统小程序