Rumah pembangunan bahagian belakang tutorial php Laravel框架+Blob实现的多图上传功能示例

Laravel框架+Blob实现的多图上传功能示例

Jan 13, 2018 am 11:48 AM
laravel muat naik

这篇文章主要介绍了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 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>
Salin selepas log masuk

JS代码:

<script>
  var _btnId = &#39;&#39;;
  var all_urls="";
  var all_types="";
  function houseImgOne(_this) {
    var img = &#39;<img class="sz" width="100px" height="100px" src=""  >&#39;
    _btnId = $(_this).attr(&#39;id&#39;);
    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) {
        $(&#39;.sz:last&#39;).before(img);
        $(&#39;.sz&#39;).eq($(".sz").length - 2).attr("src", objUrl);
      }
    }
  }
  //点击提交按钮触发ajax
    $(".submit").click(function(){
    //console.log(all_types);
    $.ajax({
      type:"post",
      url:"{{url(&#39;admin/img&#39;)}}",
      data:{&#39;imgs&#39;:all_urls,&#39;types&#39;:all_types,&#39;_token&#39;:"{{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>
Salin selepas log masuk

三.后台处理代码

public function store(Request $request)
{
  $data=$request->all();
  $imgs = $data[&#39;imgs&#39;];
  // array_values()用于重置数组下标
  $types =array_values(array_filter(explode(&#39;image/&#39;,$data[&#39;types&#39;])));
  $arr=array_values(array_filter(explode(&#39;&|||&#39;,$imgs)));
  foreach ($arr as $k => $v){
  //文件路径
  $filepath = base_path().&#39;/storage/app/imgs/&#39;.date(&#39;YmdHis&#39;).$k.&#39;.&#39;.$types[$k];
  //提取base64字符
  $imgdata = substr($v,strpos($v,",") + 1);
  $decodedData = base64_decode($imgdata);
  file_put_contents($filepath,$decodedData );
  //插入数据库
  $img = new Img;
  $filepath = strchr($filepath,&#39;/&#39;);
  $img->img_path=$filepath;
  $img->save();
}
Salin selepas log masuk

以上就是本篇文章的所有内容,希望对大家的学习提供到帮助!

相关推荐:

零起步构建一个基于Docker的Laravel应用

七个非常有用的Laravel中Carbon方法

Laravel Service Provider开发设置延迟加载时遇到的问题

Atas ialah kandungan terperinci Laravel框架+Blob实现的多图上传功能示例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk mendapatkan kod pengembalian semasa menghantar e -mel gagal di Laravel? Bagaimana untuk mendapatkan kod pengembalian semasa menghantar e -mel gagal di Laravel? Apr 01, 2025 pm 02:45 PM

Kaedah untuk mendapatkan kod kembali apabila menghantar e -mel Laravel gagal. Apabila menggunakan Laravel untuk membangunkan aplikasi, anda sering menghadapi situasi di mana anda perlu menghantar kod pengesahan. Dan pada hakikatnya ...

Tugas Jadual Laravel tidak dilaksanakan: Apa yang harus saya lakukan jika tugas itu tidak berjalan selepas Jadual: Jalankan Perintah? Tugas Jadual Laravel tidak dilaksanakan: Apa yang harus saya lakukan jika tugas itu tidak berjalan selepas Jadual: Jalankan Perintah? Mar 31, 2025 pm 11:24 PM

Tugas Jadual Laravel menjalankan penyelesaian masalah yang tidak responsif semasa menggunakan penjadualan tugas jadual Laravel, banyak pemaju akan menghadapi masalah ini: Jadual: Jalankan ...

Di Laravel, bagaimana menangani situasi di mana kod pengesahan gagal dihantar melalui e -mel? Di Laravel, bagaimana menangani situasi di mana kod pengesahan gagal dihantar melalui e -mel? Mar 31, 2025 pm 11:48 PM

Kaedah mengendalikan kegagalan e -mel Laravel untuk menghantar kod pengesahan adalah menggunakan Laravel ...

Bagaimana untuk melaksanakan fungsi jadual tersuai untuk mengklik untuk menambah data dalam admin dcat? Bagaimana untuk melaksanakan fungsi jadual tersuai untuk mengklik untuk menambah data dalam admin dcat? Apr 01, 2025 am 07:09 AM

Cara melaksanakan fungsi jadual klik tersuai untuk menambah data dalam dcatadmin (laravel-admin) semasa menggunakan dcat ...

Perkongsian Sambungan Laravel Redis: Mengapa kaedah pilih mempengaruhi sambungan lain? Perkongsian Sambungan Laravel Redis: Mengapa kaedah pilih mempengaruhi sambungan lain? Apr 01, 2025 am 07:45 AM

Kesan perkongsian sambungan Redis dalam rangka kerja Laravel dan pilih kaedah apabila menggunakan Rangka Kerja Laravel dan Redis, pemaju mungkin menghadapi masalah: melalui konfigurasi ...

Laravel Multi-Tenant Extension Stancl/Tenancy: Bagaimana Menyesuaikan Alamat Hos Sambungan Pangkalan Data Penyewa? Laravel Multi-Tenant Extension Stancl/Tenancy: Bagaimana Menyesuaikan Alamat Hos Sambungan Pangkalan Data Penyewa? Apr 01, 2025 am 09:09 AM

Sambungan pangkalan data penyewa tersuai dalam pakej lanjutan multi-penyewa Larave Stancl/penyewaan ketika membina aplikasi multi-penyewa menggunakan pakej lanjutan multi-penyewa Larave Stancl/penyewaan, ...

Laravel fasih orm dalam carian model separa Bangla) Laravel fasih orm dalam carian model separa Bangla) Apr 08, 2025 pm 02:06 PM

Pengambilan Model Laraveleloquent: Mudah mendapatkan data pangkalan data Eloquentorm menyediakan cara ringkas dan mudah difahami untuk mengendalikan pangkalan data. Artikel ini akan memperkenalkan pelbagai teknik carian model fasih secara terperinci untuk membantu anda mendapatkan data dari pangkalan data dengan cekap. 1. Dapatkan semua rekod. Gunakan kaedah semua () untuk mendapatkan semua rekod dalam jadual pangkalan data: USEAPP \ MODELS \ POST; $ POSTS = POST :: SEMUA (); Ini akan mengembalikan koleksi. Anda boleh mengakses data menggunakan gelung foreach atau kaedah pengumpulan lain: foreach ($ postsas $ post) {echo $ post->

Geospatial Laravel: Pengoptimuman peta interaktif dan sejumlah besar data Geospatial Laravel: Pengoptimuman peta interaktif dan sejumlah besar data Apr 08, 2025 pm 12:24 PM

Cecair memproses 7 juta rekod dan membuat peta interaktif dengan teknologi geospatial. Artikel ini meneroka cara memproses lebih dari 7 juta rekod menggunakan Laravel dan MySQL dan mengubahnya menjadi visualisasi peta interaktif. Keperluan Projek Cabaran Awal: Ekstrak Wawasan berharga menggunakan 7 juta rekod dalam pangkalan data MySQL. Ramai orang mula -mula mempertimbangkan bahasa pengaturcaraan, tetapi mengabaikan pangkalan data itu sendiri: Bolehkah ia memenuhi keperluan? Adakah penghijrahan data atau pelarasan struktur diperlukan? Bolehkah MySQL menahan beban data yang besar? Analisis awal: Penapis utama dan sifat perlu dikenalpasti. Selepas analisis, didapati bahawa hanya beberapa atribut yang berkaitan dengan penyelesaiannya. Kami mengesahkan kemungkinan penapis dan menetapkan beberapa sekatan untuk mengoptimumkan carian. Carian Peta Berdasarkan Bandar

See all articles