


Analysis of the multi-image upload function example implemented by Laravel framework + Blob
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
<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 code
<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>
##3. Background processing code
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 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!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

PHP and Flutter are popular technologies for mobile development. Flutter excels in cross-platform capabilities, performance and user interface, and is suitable for applications that require high performance, cross-platform and customized UI. PHP is suitable for server-side applications with lower performance and not cross-platform.

Database operations in PHP are simplified using ORM, which maps objects into relational databases. EloquentORM in Laravel allows you to interact with the database using object-oriented syntax. You can use ORM by defining model classes, using Eloquent methods, or building a blog system in practice.

PHP unit testing tool analysis: PHPUnit: suitable for large projects, provides comprehensive functionality and is easy to install, but may be verbose and slow. PHPUnitWrapper: suitable for small projects, easy to use, optimized for Lumen/Laravel, but has limited functionality, does not provide code coverage analysis, and has limited community support.

Laravel - Artisan Commands - Laravel 5.7 comes with new way of treating and testing new commands. It includes a new feature of testing artisan commands and the demonstration is mentioned below ?

The latest versions of Laravel 9 and CodeIgniter 4 provide updated features and improvements. Laravel9 adopts MVC architecture and provides functions such as database migration, authentication and template engine. CodeIgniter4 uses HMVC architecture to provide routing, ORM and caching. In terms of performance, Laravel9's service provider-based design pattern and CodeIgniter4's lightweight framework give it excellent performance. In practical applications, Laravel9 is suitable for complex projects that require flexibility and powerful functions, while CodeIgniter4 is suitable for rapid development and small applications.

Compare the data processing capabilities of Laravel and CodeIgniter: ORM: Laravel uses EloquentORM, which provides class-object relational mapping, while CodeIgniter uses ActiveRecord to represent the database model as a subclass of PHP classes. Query builder: Laravel has a flexible chained query API, while CodeIgniter’s query builder is simpler and array-based. Data validation: Laravel provides a Validator class that supports custom validation rules, while CodeIgniter has less built-in validation functions and requires manual coding of custom rules. Practical case: User registration example shows Lar

PHP Unit and Integration Testing Guide Unit Testing: Focus on a single unit of code or function and use PHPUnit to create test case classes for verification. Integration testing: Pay attention to how multiple code units work together, and use PHPUnit's setUp() and tearDown() methods to set up and clean up the test environment. Practical case: Use PHPUnit to perform unit and integration testing in Laravel applications, including creating databases, starting servers, and writing test code.

When choosing a framework for large projects, Laravel and CodeIgniter each have their own advantages. Laravel is designed for enterprise-level applications, offering modular design, dependency injection, and a powerful feature set. CodeIgniter is a lightweight framework more suitable for small to medium-sized projects, emphasizing speed and ease of use. For large projects with complex requirements and a large number of users, Laravel's power and scalability are more suitable. For simple projects or situations with limited resources, CodeIgniter's lightweight and rapid development capabilities are more ideal.
