首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >laravel多图异步上传

laravel多图异步上传

作者头像
章鱼喵
发布2019-03-20 10:12:20
1.6K0
发布2019-03-20 10:12:20
举报
文章被收录于专栏:codingcoding

创建路由

routes/web.php添加:

Route::get('image-upload', 'HomeController@imageUpload');
Route::post('image-upload', 'HomeController@imageUploadPost')->name('image.upload');

创建控制器

app/Http/Controllers/HomeController.php

<?php namespace App\Http\Controllers;
use Illuminate\Http\Request;

class HomeController extends Controller
{
    public function imageUpload()
    {
        return view('imageUpload');
    }

    public function imageUploadPost(Request $request)
    {
        request()->validate([
            'uploadFile' => 'required',
        ]);
        foreach ($request->file('uploadFile') as $key => $value) {
            $imageName = $value->getClientOriginalName();
            $value->move(public_path('images'), $imageName);
        }
        return response()->json(['success'=>'上传成功']);
    }
}

创建视图文件

resources/views/imagesUpload.blade.php

    <title>laravel异步上传多图</title>
<link href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/jquery.form/4.2.2/jquery.form.min.js"></script><style type="text/css">
        input[type=file] {
            display: inline;
        }
        #image_preview {
            padding: 10px;
        }
        #image_preview img {
            width: 200px;
            padding: 5px;
        }
    </style>
<div class="container mt-5">
    <h3>laravel5.7异步上传多图</h3>
    <form action="%7B%7B%20route('images.upload')%20%7D%7D" method="post" enctype="multipart/form-data">
        {{ csrf_field() }}
        <input type="file" id="uploadFile" name="uploadFile[]" multiple><input type="submit" class="btn btn-success btn-sm" name="submitImage" value="上传">
</form>
    <br><div id="image_preview"></div>
</div>

<script type="text/javascript">
    $("#uploadFile").change(function () {
        $('#image_preview').html("");
        let total_file = document.getElementById("uploadFile").files.length;
        for (let i = 0; i < total_file; i++) {
            $('#image_preview').append("<img src='" + URL.createObjectURL(event.target.files[i]) + "'>");
        }
    });
    $('form').ajaxForm(function () {
        alert("上传成功");
    });
</script>

演示

访问:http://localhost/image-upload

多图上传

查看public/images,即可看到上传的图片

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019.03.18 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 创建路由
  • 创建控制器
  • 创建视图文件
  • 演示
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档