


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



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 ?

Laravel - Pagination Customizations - Laravel includes a feature of pagination which helps a user or a developer to include a pagination feature. Laravel paginator is integrated with the query builder and Eloquent ORM. The paginate method automatical

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 schedule task run unresponsive troubleshooting When using Laravel's schedule task scheduling, many developers will encounter this problem: schedule:run...

The method of handling Laravel's email failure to send verification code is to use Laravel...

How to implement the table function of custom click to add data in dcatadmin (laravel-admin) When using dcat...

Laravel - Dump Server - Laravel dump server comes with the version of Laravel 5.7. The previous versions do not include any dump server. Dump server will be a development dependency in laravel/laravel composer file.

The impact of sharing of Redis connections in Laravel framework and select methods When using Laravel framework and Redis, developers may encounter a problem: through configuration...
