h5多圖片上傳
阿新 • • 發佈：2018-12-16
做了一個h5多圖片上傳
只要瞭解了 基本原理，那就很好理解了，可以看看註釋或者在網上找找原理
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="../css/mui.min.css" rel="stylesheet" /> <style type="text/css"> .wt{ border-bottom: 1px solid #C0C0C0; border-top: 1px solid #C0C0C0; padding: 20px; } .wt>div:first-child{ padding-bottom: 10px; } .lx{ padding: 20px; border-bottom: 1px solid #C0C0C0; } .img{ padding: 20px; } .pb10{ padding-bottom: 10px; } .imglist{ width: 100%; display: flex; justify-content: flex-start; align-items: center; } .imgcss{ width: 5rem; height: 5rem; border: 2px solid #CCCCCC; margin-right: 1em; position: relative; } .imgcss img{ width: 100%; height: 100%; } .addcss{ width: 5rem; height: 5rem; border: 2px solid #CCCCCC; background:#fff; position:relative; } .addcss > input{ position:relative; opacity: 0; display: block; height: 100%; width: 100%; z-index:998; } .addcss>span{ text-align:center; width:2rem; height:2rem; font-size:3rem; margin:auto; position:absolute; top:0; left:0; bottom:0; right:0; z-index:5; } .guanbi{ position: absolute; z-index: 99; top: -15%; left: 80%; border: 1px solid #C0C0C0; border-radius: 50%; background-color: white; } </style> </head> <body> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">反饋</h1> </header> <div class="mui-content"> <form action="" > <div class="wt"> <div class=""> 問題與意見 </div> <div class=""> <textarea name="" rows="7" cols="22"></textarea> </div> </div> <div class="lx"> <div class="mui-input-row"> <label>聯絡方式</label> <input type="text" placeholder="微信/QQ/郵箱"> </div> </div> <div class="img"> <div class="pb10"> 圖片（選填） </div> <div class="imglist" id="imgid"> <div class="addcss" id="addcss" > <input type="file" name="file2" id="going" accept="image/*" multiple="multiple"> <span>+</span> </div> </div> </div> <button type="button" class="mui-btn mui-btn-blue mui-btn-block" onclick="sub">提交</button> </form> </div> <script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="../js/mui.min.js"></script> <script type="text/javascript"> mui.init(); //這是用來裝圖片的陣列 var imglist = new Array(); //主要是input的change事件，只要觸發就做處理 $("#going").on("change",function(){ if(typeof FileReader == undefined) { console.log("不支援filereader"); }else{ let input = document.getElementById("going"); let imgid = document.getElementById("imgid"); let addcss = document.getElementById("addcss"); for(let i=0;i<this.files.length;i++){ if (!input['value'].match(/.jpg|.gif|.png|.bmp/i)){ //判斷上傳檔案格式 return alert("上傳的圖片格式不正確，請重新選擇") ; } //建立一個FileReader 用於讀取檔案 let reader = new FileReader(); //將檔案讀取為 DataURL reader.readAsDataURL(this.files[i]); //開始新增dom reader.onload = function(e){ result = '<div class="guanbi mui-icon mui-icon-closeempty" onclick="remove(this)"></div><img src="'+this.result+'" alt=""/>'; //新建一個div div = document.createElement('div'); //將圖片存到數組裡面 imglist.push(this.result); console.log(imglist.length); //設定能放多少個圖片（假的） setaddcss(); //給div放樣式 div.className = "imgcss"; //將html程式碼放到div裡面 樣式自己設定 div.innerHTML = result; //這裡比較關鍵 //insertBefore 是將一個元素新增到指定元素之前 addcss就是在這個元素之前新增 //div就是要新增的元素 addcss.parentNode.insertBefore( div,addcss ); } } } }) function setaddcss(){ if(imglist.length >= 4) addcss.classList.add("mui-hidden"); else addcss.classList.remove("mui-hidden"); } //刪除節點 function remove(obj){ //用了一個jq 的index函式， 可以獲取元素下標 let z = $('.guanbi').index(obj); //刪除父節點，也就是上面新增的 div $(obj).parent().remove(); //獲取到下標，將imglist裡面的圖片也刪除 imglist.splice(z,1); //設定是否能新增圖片 setaddcss(); } //下面就沒什麼了，上傳用的 function sub(){ if(!imgArr.length){ alert('請選擇要上傳的圖片'); return; } var form = document.querySelector('form'); var fd = new FormData(form); for(var i = 0;i < imgArr.length;i++){ fd.append('file[]',imgArr[i]); } var request = new XMLHttpRequest(); var url = "./file_preview.php"; request.open('post',url); request.send(fd); } </script> </body> </html>