Home Backend Development PHP Tutorial Example of multi-image upload function implemented by Laravel framework + Blob

Example of multi-image upload function implemented by Laravel framework + Blob

Jan 13, 2018 am 11:48 AM
laravel upload

This article mainly introduces the multi-image upload function implemented by the Laravel framework + Blob. It analyzes in detail the front-end submission and background processing related operation skills of the Laravel framework + Blob for multiple image upload operations in the form of examples. What is the experience of the Laravel framework? Interested friends can refer to this article

This article describes the multi-image upload function implemented by the Laravel framework + Blob. Share it with everyone for your reference, the details are as follows:

1. Introduction

We know that multiple image uploads generally come with an instant display function , that is, you can see the uploaded image immediately after uploading. A multi-image upload plug-in that I have been using before is to select an image, click Upload and upload the image resources to the server, and then return the stored path information. Finally, we click the submit button of the form to insert this information into the data library. Now there is an embarrassing place. After I clicked to upload the image, I canceled the form submission again. However, the image resources have already been sent to the server, which can easily cause a waste of space.

Now we provide a multi-image upload written by ourselves combined with the Laravel framework (of course, it can be applied directly anywhere). The feature is: the image can be displayed immediately after uploading, but it is cached by the browser called through blob Image information, when the form is submitted, the image resources will actually be uploaded to the server and database.

2. Front-endNote: This example is based on the Laravel framework

First enter the Form 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>
Copy after login

JS code:

<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>
Copy after login

3. Background processing code

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();
}
Copy after login
The above is all the content of this article, I hope to provide some information for everyone’s learning to help!

Related recommendations:

Building a Laravel application based on Docker from scratch

Seven very useful Carbon methods in Laravel

Laravel Service Provider development problems encountered when setting up lazy loading

The above is the detailed content of Example of multi-image upload function implemented by Laravel framework + Blob. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Nordhold: Fusion System, Explained
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1666
14
PHP Tutorial
1273
29
C# Tutorial
1255
24
Laravel Introduction Example Laravel Introduction Example Apr 18, 2025 pm 12:45 PM

Laravel is a PHP framework for easy building of web applications. It provides a range of powerful features including: Installation: Install the Laravel CLI globally with Composer and create applications in the project directory. Routing: Define the relationship between the URL and the handler in routes/web.php. View: Create a view in resources/views to render the application's interface. Database Integration: Provides out-of-the-box integration with databases such as MySQL and uses migration to create and modify tables. Model and Controller: The model represents the database entity and the controller processes HTTP requests.

Solve caching issues in Craft CMS: Using wiejeben/craft-laravel-mix plug-in Solve caching issues in Craft CMS: Using wiejeben/craft-laravel-mix plug-in Apr 18, 2025 am 09:24 AM

When developing websites using CraftCMS, you often encounter resource file caching problems, especially when you frequently update CSS and JavaScript files, old versions of files may still be cached by the browser, causing users to not see the latest changes in time. This problem not only affects the user experience, but also increases the difficulty of development and debugging. Recently, I encountered similar troubles in my project, and after some exploration, I found the plugin wiejeben/craft-laravel-mix, which perfectly solved my caching problem.

How to learn Laravel How to learn Laravel for free How to learn Laravel How to learn Laravel for free Apr 18, 2025 pm 12:51 PM

Want to learn the Laravel framework, but suffer from no resources or economic pressure? This article provides you with free learning of Laravel, teaching you how to use resources such as online platforms, documents and community forums to lay a solid foundation for your PHP development journey from getting started to master.

Laravel user login function Laravel user login function Apr 18, 2025 pm 12:48 PM

Laravel provides a comprehensive Auth framework for implementing user login functions, including: Defining user models (Eloquent model), creating login forms (Blade template engine), writing login controllers (inheriting Auth\LoginController), verifying login requests (Auth::attempt) Redirecting after login is successful (redirect) considering security factors: hash passwords, anti-CSRF protection, rate limiting and security headers. In addition, the Auth framework also provides functions such as resetting passwords, registering and verifying emails. For details, please refer to the Laravel documentation: https://laravel.com/doc

Laravel framework installation method Laravel framework installation method Apr 18, 2025 pm 12:54 PM

Article summary: This article provides detailed step-by-step instructions to guide readers on how to easily install the Laravel framework. Laravel is a powerful PHP framework that speeds up the development process of web applications. This tutorial covers the installation process from system requirements to configuring databases and setting up routing. By following these steps, readers can quickly and efficiently lay a solid foundation for their Laravel project.

What versions of laravel are there? How to choose the version of laravel for beginners What versions of laravel are there? How to choose the version of laravel for beginners Apr 18, 2025 pm 01:03 PM

In the Laravel framework version selection guide for beginners, this article dives into the version differences of Laravel, designed to assist beginners in making informed choices among many versions. We will focus on the key features of each release, compare their pros and cons, and provide useful advice to help beginners choose the most suitable version of Laravel based on their skill level and project requirements. For beginners, choosing a suitable version of Laravel is crucial because it can significantly impact their learning curve and overall development experience.

How to view the version number of laravel? How to view the version number of laravel How to view the version number of laravel? How to view the version number of laravel Apr 18, 2025 pm 01:00 PM

The Laravel framework has built-in methods to easily view its version number to meet the different needs of developers. This article will explore these methods, including using the Composer command line tool, accessing .env files, or obtaining version information through PHP code. These methods are essential for maintaining and managing versioning of Laravel applications.

The difference between laravel and thinkphp The difference between laravel and thinkphp Apr 18, 2025 pm 01:09 PM

Laravel and ThinkPHP are both popular PHP frameworks and have their own advantages and disadvantages in development. This article will compare the two in depth, highlighting their architecture, features, and performance differences to help developers make informed choices based on their specific project needs.

See all articles