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

Analysis of the multi-image upload function example implemented by Laravel framework + Blob

Jul 02, 2018 pm 05:59 PM
blob laravel Multiple image upload

This article mainly introduces the multi-image upload function implemented by Laravel framework Blob. It analyzes in detail the front-end submission and background processing related operation skills of Laravel framework Blob for multiple image upload operations in the form of examples. Friends in need can refer to the following

The example in this article describes the multi-image upload function implemented by 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 database.

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-end

Note: This example is based on the Laravel framework

First enter the Form form

1

2

3

4

5

6

7

8

<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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

<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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

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

Articles you may be interested in:

Swoole 1.10.0 new version released, Added a number of new feature analysis

Example explanation of the method of printing a matrix (spiral matrix) clockwise in PHP

PHP explains the method of judging whether a binary tree is symmetrical

The above is the detailed content of Analysis of the multi-image upload function example 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 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)

How to get the return code when email sending fails in Laravel? How to get the return code when email sending fails in Laravel? Apr 01, 2025 pm 02:45 PM

Method for obtaining the return code when Laravel email sending fails. When using Laravel to develop applications, you often encounter situations where you need to send verification codes. And in reality...

Laravel Eloquent ORM in Bangla partial model search) Laravel Eloquent ORM in Bangla partial model search) Apr 08, 2025 pm 02:06 PM

LaravelEloquent Model Retrieval: Easily obtaining database data EloquentORM provides a concise and easy-to-understand way to operate the database. This article will introduce various Eloquent model search techniques in detail to help you obtain data from the database efficiently. 1. Get all records. Use the all() method to get all records in the database table: useApp\Models\Post;$posts=Post::all(); This will return a collection. You can access data using foreach loop or other collection methods: foreach($postsas$post){echo$post->

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.

Laravel's geospatial: Optimization of interactive maps and large amounts of data Laravel's geospatial: Optimization of interactive maps and large amounts of data Apr 08, 2025 pm 12:24 PM

Efficiently process 7 million records and create interactive maps with geospatial technology. This article explores how to efficiently process over 7 million records using Laravel and MySQL and convert them into interactive map visualizations. Initial challenge project requirements: Extract valuable insights using 7 million records in MySQL database. Many people first consider programming languages, but ignore the database itself: Can it meet the needs? Is data migration or structural adjustment required? Can MySQL withstand such a large data load? Preliminary analysis: Key filters and properties need to be identified. After analysis, it was found that only a few attributes were related to the solution. We verified the feasibility of the filter and set some restrictions to optimize the search. Map search based on city

Laravel and the Backend: Powering Web Application Logic Laravel and the Backend: Powering Web Application Logic Apr 11, 2025 am 11:29 AM

How does Laravel play a role in backend logic? It simplifies and enhances backend development through routing systems, EloquentORM, authentication and authorization, event and listeners, and performance optimization. 1. The routing system allows the definition of URL structure and request processing logic. 2.EloquentORM simplifies database interaction. 3. The authentication and authorization system is convenient for user management. 4. The event and listener implement loosely coupled code structure. 5. Performance optimization improves application efficiency through caching and queueing.

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.

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.

See all articles