この記事では主にLaravelフレームワーク+Blobで実装された複数画像アップロード機能を紹介します。Laravelフレームワーク+Blobのフロントエンド送信とバックグラウンド処理関連の操作スキルをサンプル形式で詳細に分析しています。 . Laravelフレームワークに興味のある方はこちらの記事を参考にしてください
この記事の例では、Laravelフレームワーク+Blobで実装した複数画像アップロード機能について説明しています。参考のために皆さんと共有してください。詳細は次のとおりです:
1. はじめに
一般に、複数の画像のアップロードにはインスタント表示機能が付いていること、つまり、アップロードされた画像をすぐに見ることができることはわかっています。アップロード後。以前使用していた複数画像アップロード プラグインは、画像を選択し、[アップロード] をクリックして画像リソースをサーバーにアップロードし、最後にフォームの送信ボタンをクリックして保存されたパス情報を返します。この情報をデータ ライブラリに挿入します。 さて、恥ずかしいことに、写真をクリックしてアップロードした後、再びフォームの送信をキャンセルしてしまいました。ただし、画像リソースはすでにサーバーに送信されているため、スペースの無駄が発生しやすくなります。
今回は、Laravelフレームワークと組み合わせて自分で作成した複数画像のアップロードを提供します(もちろん、どこにでも直接適用できます)。特徴は、アップロード後すぐに画像を表示できますが、ブラウザは画像情報をキャッシュします。フォームが送信された後、BLOB 呼び出しを通じて画像リソースが実際にサーバーとデータベースにアップロードされます。
2. フロントエンド 注: この例は Laravel フレームワークに基づいています
最初にフォーム
<form method="post" enctype="multipart/form-data" action="#"> {{csrf_field()}} <ul class="list_btn"> <li><img class="sz lazy" src="/static/imghwm/default1.png" data-src="" style="max-width:90%"imgone" style="max-width:90%" height="100px" style="display: none;" alt="Laravelフレームワーク+Blobで実装した複数画像アップロード機能の例" ></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 コードを入力します:
<script> var _btnId = ''; var all_urls=""; var all_types=""; function houseImgOne(_this) { var img = '<img class="sz" style="max-width:90%" height="100px" src="" alt="Laravelフレームワーク+Blobで実装した複数画像アップロード機能の例" >' _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. バックグラウンド処理コード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();
}
それはこの記事はすべての内容であり、皆様の学習に役立つことを願っています。
関連する推奨事項:
Docker ベースの Laravel アプリケーションを最初から構築する Laravel の 7 つの非常に便利な Carbon メソッド 遅延読み込みを設定するときに遭遇する Laravel サービスプロバイダー開発の問題以上がLaravelフレームワーク+Blobで実装した複数画像アップロード機能の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

本篇文章给大家带来了关于laravel的相关知识,其中主要介绍了关于单点登录的相关问题,单点登录是指在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统,下面一起来看一下,希望对大家有帮助。

本篇文章给大家带来了关于laravel的相关知识,其中主要介绍了关于Laravel的生命周期相关问题,Laravel 的生命周期从public\index.php开始,从public\index.php结束,希望对大家有帮助。

在laravel中,guard是一个用于用户认证的插件;guard的作用就是处理认证判断每一个请求,从数据库中读取数据和用户输入的对比,调用是否登录过或者允许通过的,并且Guard能非常灵活的构建一套自己的认证体系。

laravel中asset()方法的用法:1、用于引入静态文件,语法为“src="{{asset(‘需要引入的文件路径’)}}"”;2、用于给当前请求的scheme前端资源生成一个url,语法为“$url = asset('前端资源')”。

本篇文章给大家带来了关于laravel的相关知识,其中主要介绍了关于使用中间件记录用户请求日志的相关问题,包括了创建中间件、注册中间件、记录用户访问等等内容,下面一起来看一下,希望对大家有帮助。

本篇文章给大家带来了关于laravel的相关知识,其中主要介绍了关于中间件的相关问题,包括了什么是中间件、自定义中间件等等,中间件为过滤进入应用的 HTTP 请求提供了一套便利的机制,下面一起来看一下,希望对大家有帮助。

在laravel中,fill方法是一个给Eloquent实例赋值属性的方法,该方法可以理解为用于过滤前端传输过来的与模型中对应的多余字段;当调用该方法时,会先去检测当前Model的状态,根据fillable数组的设置,Model会处于不同的状态。

laravel路由文件在“routes”目录里。Laravel中所有的路由文件定义在routes目录下,它里面的内容会自动被框架加载;该目录下默认有四个路由文件用于给不同的入口使用:web.php、api.php、console.php等。


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター

ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

Dreamweaver Mac版
ビジュアル Web 開発ツール
