TP5框架實現一次選擇多張圖片並預覽的方法示例
阿新 • • 發佈:2020-04-07
本文例項講述了TP5框架實現一次選擇多張圖片並預覽的方法。分享給大家供大家參考,具體如下:
點選選擇圖片(可選多張),確定後將選擇的圖片顯示在頁面上,已經選擇的圖片也可以刪除,點選提交將圖片提交給後臺。
1、效果圖
2、code
用input標籤並選擇type=file,記得帶上multiple,不然就只能單選圖片了
如果不想通過 ajax 提交,一定要加上檔案傳輸協議 ( enctype="multipart/form-data" )
view
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>showImages</title> <style type="text/css"> .float{ float:left; width : 200px; height: 200px; overflow: hidden; border: 1px solid #CCCCCC; border-radius: 10px; padding: 5px; margin: 5px; } img{ position: relative; } .result{ width: 200px; height: 200px; text-align: center; box-sizing: border-box; } #file_input{ display: none; } .delete{ width: 200px; height:200px; position: absolute; text-align: center; line-height: 200px; z-index: 10; font-size: 30px; background-color: rgba(255,255,0.8); color: #777; opacity: 0; transition-duration: :0.7s; -webkit-transition-duration: 0.7s; } .delete:hover{ cursor: pointer; opacity: 1; } </style> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> window.onload = function(){ var input = document.getElementById("file_input"); var result; var dataArr = []; // 儲存所選圖片的結果(檔名和base64資料) var fd; //FormData方式傳送請求 var oSelect = document.getElementById("select"); var oAdd = document.getElementById("add"); var oSubmit = document.getElementById("submit"); var oInput = document.getElementById("file_input"); if(typeof FileReader==='undefined'){ alert("抱歉,你的瀏覽器不支援 FileReader"); input.setAttribute('disabled','disabled'); }else{ input.addEventListener('change',readFile,false); } //handler function readFile(){ fd = new FormData(); var iLen = this.files.length; var index = 0; for(var i=0;i<iLen;i++){ if (!input['value'].match(/.jpg|.gif|.png|.jpeg|.bmp/i)){ //判斷上傳檔案格式 return alert("上傳的圖片格式不正確,請重新選擇"); } var reader = new FileReader(); reader.index = i; fd.append(i,this.files[i]); reader.readAsDataURL(this.files[i]); //轉成base64 reader.fileName = this.files[i].name; reader.onload = function(e){ var imgMsg = { name : this.fileName,//獲取檔名 base64 : this.result //reader.readAsDataURL方法執行完後,base64資料儲存在reader.result裡 } dataArr.push(imgMsg); result = '<div class="delete">delete</div><div class="result"><img src="'+this.result+'" alt="TP5框架實現一次選擇多張圖片並預覽的方法示例"/></div>'; var div = document.createElement('div'); div.innerHTML = result; div['className'] = 'float'; div['index'] = index; document.getElementsByTagName('body')[0].appendChild(div); //插入dom樹 var img = div.getElementsByTagName('img')[0]; img.onload = function(){ var nowHeight = ReSizePic(this); //設定圖片大小 this.parentNode.style.display = 'block'; var oParent = this.parentNode; if(nowHeight){ oParent.style.paddingTop = (oParent.offsetHeight - nowHeight)/2 + 'px'; } } div.onclick = function(){ this.remove(); // 在頁面中刪除該圖片元素 delete dataArr[this.index]; // 刪除dataArr對應的資料 } index++; } } } function send(){ var submitArr = []; for (var i = 0; i < dataArr.length; i++) { if (dataArr[i]) { submitArr.push(dataArr[i]); } } // console.log('提交的資料:'+JSON.stringify(submitArr)) $.ajax({ url : 'http://39.106.182.218',type : 'post',data : JSON.stringify(submitArr),dataType: 'json',//processData: false,用FormData傳fd時需有這兩項 //contentType: false,success : function(data){ console.log('返回的資料:'+JSON.stringify(data)) } }) } oSelect.οnclick=function(){ oInput.value = ""; // 先將oInput值清空,否則選擇圖片與上次相同時change事件不會觸發 //清空已選圖片 $('.float').remove(); dataArr = []; index = 0; oInput.click(); } oAdd.οnclick=function(){ oInput.value = ""; // 先將oInput值清空,否則選擇圖片與上次相同時change事件不會觸發 oInput.click(); } oSubmit.οnclick=function(){ if(!dataArr.length){ return alert('請先選擇檔案'); } send(); } } /* 用ajax傳送fd引數時要告訴jQuery不要去處理髮送的資料, 不要去設定Content-Type請求頭才可以傳送成功,否則會報“Illegal invocation”的錯誤, 也就是非法呼叫,所以要加上“processData: false,contentType: false,” * */ function ReSizePic(ThisPic) { var RePicWidth = 200; //這裡修改為您想顯示的寬度值 var TrueWidth = ThisPic.width; //圖片實際寬度 var TrueHeight = ThisPic.height; //圖片實際高度 if(TrueWidth>TrueHeight){ //寬大於高 var reWidth = RePicWidth; ThisPic.width = reWidth; //垂直居中 var nowHeight = TrueHeight * (reWidth/TrueWidth); return nowHeight; //將圖片修改後的高度返回,供垂直居中用 }else{ //寬小於高 var reHeight = RePicWidth; ThisPic.height = reHeight; } } </script> </head> <body> <div class="container"> <label>請選擇一個影象檔案:</label> <button id="select">(重新)選擇圖片</button> <button id="add">(追加)圖片</button> <form action="" method="post" enctype="multipart/form-data"> <input type="file" id="file_input" name="image[]" multiple/> <!--用input標籤並選擇type=file,記得帶上multiple,不然就只能單選圖片了--> <button id="submit">提交</button> </form> </div> </body> </html>
controller
$image=request()->file('image'); print_r($image);
3、over!!!
更多關於thinkPHP相關內容感興趣的讀者可檢視本站專題:《ThinkPHP入門教程》、《thinkPHP模板操作技巧總結》、《ThinkPHP常用方法總結》、《codeigniter入門教程》、《CI(CodeIgniter)框架進階教程》、《Zend FrameWork框架入門教程》及《PHP模板技術總結》。
希望本文所述對大家基於ThinkPHP框架的PHP程式設計有所幫助。