這篇文章主要介紹了Laravel框架+Blob實現的多圖上傳功能,結合實例形式詳細分析了Laravel框架+Blob進行多張圖片上傳操作的前端提交與後台處理相關操作技巧,對Laravel框架感有興趣的朋友可以參考下本篇文章
本文實例講述了Laravel框架+Blob實現的多圖上傳功能。分享給大家供大家參考,具體如下:
一.介紹
我們知道多圖上傳一般都附帶的又即時顯示功能,即上傳後可立刻看到所傳圖片。之前一直用的一個多圖上傳插件是選擇圖片,點擊上傳然後圖片資源上傳到伺服器,然後返回儲存的路徑信息,最後我們點擊表單的提交按鈕後將這些資訊插入資料庫。
現在有一個尷尬的地方,當我點擊上傳圖片後,我又取消這次表單提交了。可是圖片資源已經到伺服器了,容易造成空間浪費等。
現在提供一個自己結合Laravel框架寫的多圖上傳,(當然,在任何地方都可以直接套用),特點是:圖片上傳後可即時顯示,但是是透過blob調用的瀏覽器緩存圖片訊息,當表單提交後,圖片資源才會真正的上傳伺服器與資料庫。
二.前端
註:本範例基於Laravel框架
先上Form表單
<form method="post" enctype="multipart/form-data" action="#"> {{csrf_field()}} <ul class="list_btn"> <li><img class="sz lazy" src="/static/imghwm/default1.png" data-src="" style="max-width:90%"imgone" style="max-width:90%" height="100px" style="display: none;" alt="Laravel框架+Blob實作的多圖上傳功能範例" ></li> <li> <input type="file" id="house_img_one1" name="art_thumb" multiple="multiple" onchange="houseImgOne(this)"></li> </ul> <p class="submit">上传</p> </form>
JS程式碼:
<script> var _btnId = ''; var all_urls=""; var all_types=""; function houseImgOne(_this) { var img = '<img class="sz" style="max-width:90%" height="100px" src="" alt="Laravel框架+Blob實作的多圖上傳功能範例" >' _btnId = $(_this).attr('id'); var obj = document.getElementById("house_img_one1"); var length = obj.files.length; //多图上传时遍历文件信息(可以通过object.files查看) for (var i = 0; i < length; i++) { var objUrl = getObjectURL(_this.files[i]); //图片后缀类型拼接 all_types=all_types+_this.files[i].type; //将图片转换成base64自字符 var oFReader = new FileReader(); oFReader.readAsDataURL(_this.files[i]); oFReader.onload = function (oFREvent) { all_urls=all_urls+oFREvent.target.result+"&|||"; //拼接data形式base64的url }; if (objUrl) { $('.sz:last').before(img); $('.sz').eq($(".sz").length - 2).attr("src", objUrl); } } } //点击提交按钮触发ajax $(".submit").click(function(){ //console.log(all_types); $.ajax({ type:"post", url:"{{url('admin/img')}}", data:{'imgs':all_urls,'types':all_types,'_token':"{{csrf_token()}}"}, dataType:"json", success:function(data){ if (data==1){ // layer插件提示,可自行选择则 layer.msg("上传成功", {icon: 6}); window.location.reload(); }else { alert("上传失败!"); } } }); }); //获取blog对象url(实际获取的是缓存中的图片路径信息,用于即时显示,并非服务器返回的实际资源路径) function getObjectURL(file) { var url = null; if (window.createObjectURL != undefined) { url = window.createObjectURL(file); } else if (window.URL != undefined) { url = window.URL.createObjectURL(file); } else if (window.webkitURL != undefined) { url = window.webkitURL.createObjectURL(file); } return url; } </script>
三.後台處理程式碼
#public function store(Request $request) { $data=$request->all(); $imgs = $data['imgs']; // array_values()用于重置数组下标 $types =array_values(array_filter(explode('image/',$data['types']))); $arr=array_values(array_filter(explode('&|||',$imgs))); foreach ($arr as $k => $v){ //文件路径 $filepath = base_path().'/storage/app/imgs/'.date('YmdHis').$k.'.'.$types[$k]; //提取base64字符 $imgdata = substr($v,strpos($v,",") + 1); $decodedData = base64_decode($imgdata); file_put_contents($filepath,$decodedData ); //插入数据库 $img = new Img; $filepath = strchr($filepath,'/'); $img->img_path=$filepath; $img->save(); }
以上就是本篇文章的所有內容,希望對大家的學習提供到幫助!
相關推薦:
Laravel Service Provider開發設定延遲載入時遇到的問題
#以上是Laravel框架+Blob實作的多圖上傳功能範例的詳細內容。更多資訊請關注PHP中文網其他相關文章!

phpsessionstrackuserdataacrossmultiplepagerequestsusingauniqueIdStoredInAcookie.here'showtomanageThemeffectionaly:1)startAsessionWithSessionWwithSession_start()和stordoredAtain $ _session.2)

在PHP中,遍歷會話數據可以通過以下步驟實現:1.使用session_start()啟動會話。 2.通過foreach循環遍歷$_SESSION數組中的所有鍵值對。 3.處理複雜數據結構時,使用is_array()或is_object()函數,並用print_r()輸出詳細信息。 4.優化遍歷時,可採用分頁處理,避免一次性處理大量數據。這將幫助你在實際項目中更有效地管理和使用PHP會話數據。

會話通過服務器端的狀態管理機制實現用戶認證。 1)會話創建並生成唯一ID,2)ID通過cookies傳遞,3)服務器存儲並通過ID訪問會話數據,4)實現用戶認證和狀態管理,提升應用安全性和用戶體驗。

Tostoreauser'snameinaPHPsession,startthesessionwithsession_start(),thenassignthenameto$_SESSION['username'].1)Usesession_start()toinitializethesession.2)Assigntheuser'snameto$_SESSION['username'].Thisallowsyoutoaccessthenameacrossmultiplepages,enhanc

PHPSession失效的原因包括配置錯誤、Cookie問題和Session過期。 1.配置錯誤:檢查並設置正確的session.save_path。 2.Cookie問題:確保Cookie設置正確。 3.Session過期:調整session.gc_maxlifetime值以延長會話時間。

在PHP中調試會話問題的方法包括:1.檢查會話是否正確啟動;2.驗證會話ID的傳遞;3.檢查會話數據的存儲和讀取;4.查看服務器配置。通過輸出會話ID和數據、查看會話文件內容等方法,可以有效診斷和解決會話相關的問題。

多次調用session_start()會導致警告信息和可能的數據覆蓋。 1)PHP會發出警告,提示session已啟動。 2)可能導致session數據意外覆蓋。 3)使用session_status()檢查session狀態,避免重複調用。

在PHP中配置會話生命週期可以通過設置session.gc_maxlifetime和session.cookie_lifetime來實現。 1)session.gc_maxlifetime控制服務器端會話數據的存活時間,2)session.cookie_lifetime控制客戶端cookie的生命週期,設置為0時cookie在瀏覽器關閉時過期。


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器

DVWA
Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

Atom編輯器mac版下載
最受歡迎的的開源編輯器

記事本++7.3.1
好用且免費的程式碼編輯器

mPDF
mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),