Laravel架構+Blob實現的多圖上傳功能樣本解析

這篇文章主要介紹了Laravel架構+Blob實現的多圖上傳功能,結合執行個體形式詳細分析了Laravel架構+Blob進行多張圖片上傳操作的前端提交與幕後處理相關操作技巧,需要的朋友可以參考下

本文執行個體講述了Laravel架構+Blob實現的多圖上傳功能。分享給大家供大家參考，具體如下：

一.介紹

我們知道多圖上傳一般都附帶的又即時顯示功能，即上傳後可以立刻看到所傳圖片。之前一直用的一個多圖上傳外掛程式是選擇圖片，點擊上傳然後圖片資源上傳到伺服器，然後返回儲存的路徑資訊，最後我們點擊表單的提交按鈕後將這些資訊插入資料庫。

現在有一個尷尬的地方，當我點擊上傳圖片後，我又取消這次表單提交了。可是圖片資源已經到伺服器了，容易造成空間浪費等。

現在提供一個自己結合Laravel架構寫的多圖上傳，（當然，在任何地方都可以直接套用），特點是：圖片上傳後可即時顯示，但是是通過blob調用的瀏覽器緩衝圖片資訊，當表單提交後，圖片資源才會真正的上傳伺服器與資料庫。

二.前端

註：本例基於Laravel架構

先上Form表單

<form method="post" enctype="multipart/form-data" action="#">  {{csrf_field()}}  <ul class="list_btn">  <li><img id="imgone" class="sz" width="100px" height="100px" src="" style="display: none;"></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" width="100px" height="100px" src=""  >'    _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();}

您可能感興趣的文章:

Swoole 1.10.0新版本發布，增加了多項新特性解析

PHP實現順時針列印矩陣(螺旋矩陣)的方法樣本講解

PHP實現判斷二叉樹是否對稱的方法講解