PC或者移動端常用的上傳圖片
阿新 • • 發佈：2018-12-31
在開發app過程中我們遇到了這樣的需求，要求上傳身份證，評價晒圖，意見反饋晒圖等，還要可以單個上傳和多張上傳。要實現也不難，話不多少，直接上程式碼。
html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JSS實現帶刪除功能可以多張圖片上傳預覽外掛</title> <link href="css/index.css" type="text/css" rel="stylesheet"> </head> <body> <div class="img-box full"> <div class=" img-section"> <p class="up-p">上傳圖片demo： <span class="up-span">最多可以上傳5張圖片,可以單張上傳也可以多張上傳</span> </p> <div class="z_photo upimg-div clear"> <div class="z_file fl"> <img src="img/a11.png" class="add-img"> <input type="file" name="file" id="file" class="file" value="" accept="image/jpg,image/jpeg,image/png,image/bmp" multiple /> </div> </div> </div> </div> <div class="mask works-mask"> <div class="mask-content"> <p class="del-p ">您確定要刪除圖片嗎？</p> <p class="check-p"> <span class="del-com wsdel-ok">確定</span> <span class="wsdel-no">取消</span> </p> </div> </div> <script src="js/jquery-1.8.3.min.js"></script> <script src="js/fileImgs.js"></script> </body> </html>
css
button{ outline: none; border: 0px; } input{ outline: none; } a { outline: none; } a,button{cursor:pointer;} body { background: #f4f4f4; font-size: 14px; font-family: "微軟雅黑", "PingFang SC", "arial, helvetica, sans-serif"; } .clear { clear: both; } .full{ width: 1210px; min-width: 1210px; margin: 0 auto; } /* ====clear float====== */ /*nav a:visited{color: rgb(65,65,65);} aside a:visited{color: rgb(65,65,65);}*/ .fl { float: left; } .fr { float: right; } .clear:after { content: ''; display: block; clear: both; } /* reset */ .pic img{display: none;} i,p,h1,h2,h3,h4,h5,h6,hr,br,em,dl,dd,li,ul,ol,td,th,pre,form,body,input,strong,textarea,select,figcaption,figure{ margin: 0; padding: 0; } em { font-style: normal } li { list-style: none } a { text-decoration: none; } img { border: none; } table { border-collapse: collapse; } textarea { resize: none; overflow: auto; } a,button{cursor:pointer;} /* common-css */ /*上傳圖片外掛的樣式*/ .img-box{ margin-top: 40px; } .img-box .up-p{ margin-bottom: 20px; font-size: 16px; color: #555; } .z_photo{ padding: 18px; border:2px dashed #E7E6E6; /*padding: 18px;*/ } .z_photo .z_file{ position: relative; } .z_file .file{ width: 100%; height: 100%; opacity: 0; position: absolute; top: 0px; left: 0px; z-index: 100; } .z_photo .up-section{ position: relative; margin-right: 20px; margin-bottom: 20px; cursor: pointer; } .up-section .close-upimg{ width: 48px; height:48px; position: absolute; top: 0px; right: 0px; display: none; z-index: 10; } .up-section .up-span{ display: block; width: 100%; height: 100%; visibility: hidden; position: absolute; top: 0px; left: 0px; z-index: 9; background: rgba(0,0,0,.5); } .up-section:hover{ border:2px solid #5bcc21; } .up-section:hover .close-upimg{ display: block; } .up-section:hover .up-span{ visibility: visible; } .z_photo .up-img{ display: block; width: 100%; height: 100%; } .loading{ border: 1px solid #D1D1D1; background:url(../img/loading.gif) no-repeat center; } .up-opcity{ opacity: 0; } .img-name-p{ display: none; } .upimg-div .up-section { width: 190px; height: 180px; } .img-box .upimg-div .z_file { width: 190px; height: 180px; } .z_file .add-img { display: block; width: 190px; height: 180px; } /*遮罩層樣式*/ .mask{ z-index: 1000; display: none; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0,0,0,.4); } .mask .mask-content{ width: 400px; position: absolute; top: 50%; left: 53%; margin-left: -250px; margin-top: -90px; background: #fff; height: 175px; text-align: center; z-index: 22; border-radius: 6px; } .mask .mask-content .del-p{ color: #555; height: 110px; line-height: 110px; font-size: 18px; border-bottom: 1px solid #D1D1D1; } .mask-content .check-p{ height: 66px; line-height: 66px; position: absolute; bottom: 0px; left: 0px; width: 100%; } .mask-content .check-p span{ width: 49%; display: inline-block; text-align: center; color: #f60; font-size: 18px; cursor: pointer; } .check-p .del-com{ border-right: 1px solid #D1D1D1; }
js,記得引入jquery.js檔案哦
$(function(){ var delParent; var defaults = { fileType : ["jpg","png","bmp","jpeg"], // 上傳檔案的型別 fileSize : 1024 * 1024 * 10 // 上傳檔案的大小 10M }; /*點選圖片的文字框*/ $(".file").change(function(){ var idFile = $(this).attr("id"); var file = document.getElementById(idFile); var imgContainer = $(this).parents(".z_photo"); //存放圖片的父親元素 var fileList = file.files; //獲取的圖片檔案 var input = $(this).parent();//文字框的父親元素 var imgArr = []; //遍歷得到的圖片檔案 var numUp = imgContainer.find(".up-section").length; var totalNum = numUp + fileList.length; //總的數量 if(fileList.length > 5 || totalNum > 5 ){ alert("上傳圖片數目不可以超過5個，請重新選擇"); //一次選擇上傳超過5個 或者是已經上傳和這次上傳的到的總數也不可以超過5個 } else if(numUp < 5){ fileList = validateUp(fileList); for(var i = 0;i<fileList.length;i++){ var imgUrl = window.URL.createObjectURL(fileList[i]); imgArr.push(imgUrl); var $section = $("<section class='up-section fl loading'>"); imgContainer.prepend($section); var $span = $("<span class='up-span'>"); $span.appendTo($section); var $img0 = $("<img class='close-upimg'>").on("click",function(event){ event.preventDefault(); event.stopPropagation(); $(".works-mask").show(); delParent = $(this).parent(); }); $img0.attr("src","img/closeBtn-1.png").appendTo($section); var $img = $("<img class='up-img up-opcity'>"); $img.attr("src",imgArr[i]); $img.appendTo($section); var $p = $("<p class='img-name-p'>"); $p.html(fileList[i].name).appendTo($section); var $input = $("<input id='taglocation' name='taglocation' value='' type='hidden'>"); $input.appendTo($section); var $input2 = $("<input id='tags' name='tags' value='' type='hidden'/>"); $input2.appendTo($section); } } setTimeout(function(){ $(".up-section").removeClass("loading"); $(".up-img").removeClass("up-opcity"); },450); numUp = imgContainer.find(".up-section").length; if(numUp >= 5){ $(this).parent().hide(); } }); $(".z_photo").delegate(".close-upimg","click",function(){ $(".works-mask").show(); delParent = $(this).parent(); }); $(".wsdel-ok").click(function(){ $(".works-mask").hide(); var numUp = delParent.siblings().length; if(numUp < 6){ delParent.parent().find(".z_file").show(); } delParent.remove(); }); $(".wsdel-no").click(function(){ $(".works-mask").hide(); }); function validateUp(files){ var arrFiles = [];//替換的檔案陣列 for(var i = 0, file; file = files[i]; i++){ //獲取檔案上傳的字尾名 var newStr = file.name.split("").reverse().join(""); if(newStr.split(".")[0] != null){ var type = newStr.split(".")[0].split("").reverse().join(""); console.log(type+"===type==="); if(jQuery.inArray(type, defaults.fileType) > -1){ // 型別符合，可以上傳 if (file.size >= defaults.fileSize) { alert(file.size); alert('您這個"'+ file.name +'"檔案大小過大'); } else { // 在這裡需要判斷當前所有檔案中 arrFiles.push(file); } }else{ alert('您這個"'+ file.name +'"上傳型別不符合'); } }else{ alert('您這個"'+ file.name +'"沒有型別, 無法識別'); } } return arrFiles; } })
下面可以來看看效果預覽哦
這樣就實現了，主要用到的:
1.就是input的屬性“file”，這個可以傳1張，如果我們要多傳幾張就要用到multiple這個屬性;
2.就是把input的透明度（opacity=0）;藉助一張圖片或者一個元素上傳，其實點選的本事是input,只不過使用者看不到而已；
3.限制上傳圖片的數量，不能無限上傳，給伺服器造成壓力；
4.新增刪除按鈕，可以隨時更換，或者取消操作；
5.判斷上傳的檔案的格式是否符合圖片的格式，看字尾名是否是jpg/jpeg/png/bmp這幾個；
由於時間有限，暫且擱筆，寫的不深，還望朋友們提出寶貴意見，一起進步，謝謝！