Laravel 技巧库

第11回 Ajax 上传（全24回）

全24回
2018年05月26日发布

此课程是「超简单的 Laravel 新手入门教程」的续集，请确定你之前已经完成了它的学习。
laravel技巧库是我整理出来的各种做laravel开发常用的技巧。相信你通过对这些课程的学习，laravel的技术也将达到一个新的高度。

课程中基本囊括了所有常用的laravel开发技巧。如果你之前已经有一些laravel的开发经验了，那你依然值得关注下面这些课程：

第三方登录的实现方法
Ajax 上传
Laravel Collective 重构 Form
评论提交 Ajax 化

所谓，师傅领入门，修行靠个人。学了这一期课程后，你现在已经有能力自己规划一些laravel的项目了。也只有将课程中学习到的知识，用在了实际项目里，你才算真正的掌握了这些知识。好的，那我就期待你的个人作品了。

项目 Github 地址

你可以从这里得到完整的项目源码。
https://github.com/canon4ever/laravel_tricks

课程讨论 QQ 群

课程中有任何问题，你可以在讨论群中提出。但有提问，知无不言。
武汉前端_PHP 学习交流群：76093078

Laravel 技巧库（全24回）

插件

使用ajax来实现上传功能，需要用到jquery.html5-fileupload.js这样一个插件。这个插件我自己用的非常顺手，而且用法也非常的简单，所以我就推荐给大家来使用了。

插件的下载地址，大家可以在课程的资料中找到。https://github.com/AaronRyuu/laravel_tricks/blob/master/public/assets/js/jquery.html5-fileupload.js
有了这个插件后，放到public/assets/js目录中。

controller

这一次我们实现上传，就不在RegisterController中了，来自己新建一个叫做photos的控制器。里面就写一个store方法，然后把之前RegisterController中register方法中所有代码，都剪切过来。RegisterController一些多余的代码，我们也清理掉。

php artisan make:controller PhotosController

use Illuminate\Support\Facades\Storage;

class PhotosController extends Controller
{
    public function store(Request $request)
    {
        //...
    }
}

route

配置一下路由，只需要一个store

Route::resource('photos', 'PhotosController', ['only' => 'store']);

views

app.blade.php布局模板中，先到head里，加上这么一段代码。
这还是因为 csrf token 的原因，使用ajax的方式来提交数据，就得有这么一行代码。一会在js中还要来读取这里面的数据。

底部body标签之前，加一个yield

<head>
    <meta name="csrf-token" content="{{ csrf_token() }}">
</head>


<body>
<!-- ... -->

@yield('scripts')
</body>

基础格式

打开register.blade.php，底部咱们加上对应的js代码。
先要引用这个插件。

先要加一个ajaxSetup，它的意思就是，读取meta标签里的csrf field。并在发送ajax的时候，将这个值也发送给php。

插件的调用也非常简单，就只有几个参数需要设置一下。最底下的这行代码，就是启动插件了。

@section('scripts')
    <script src="/assets/js/jquery.html5-fileupload.js"></script>
    <script>
        //发送ajax请求时，带上csrf token
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        //插件的配置
        var opts = {
            url: "/photos",
            type: "POST",

            //上传之前
            beforeSend: function () {

            },

            //上传成功后
            success: function (result, status, xhr) {

            },

            //上传失败
            error: function (result, status, errorThrown) {

            }
        }

        //启动
        $('#photo_upload').fileUpload(opts);
    </script>
@endsection

现在打开chrome的network，来调试一下试试。可以正常的返回信息了。

PhotosController

修改store方法，成功后

return response()->json(['message' => 'success', 'data' => $url], 200);

完整 js

再来继续完善一下插件的方法。

<script>
    //发送ajax请求时，带上csrf token
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    //插件的配置
    var opts = {
        url: "/photos",
        type: "POST",

        //上传之前
        beforeSend: function () {
            $("#loading").attr("class", "am-icon-spinner am-icon-pulse");
        },

        //上传成功后
        success: function (result, status, xhr) {
            $("input[name='avatar']").val(result.data);
            $("#photo_show").attr('src', result.data);
            $("#loading").attr("class", "am-icon-cloud-upload");
        },

        //上传失败
        error: function (result, status, errorThrown) {
            alert(result.responseJSON.message)
            $("#loading").attr("class", "am-icon-cloud-upload");
        }
    }

    //启动
    $('#photo_upload').fileUpload(opts);
</script>

在上传之前，我希望呢，这里的图标能有一点变换，能让用户感觉到现在是在上传文件了。

成功后，需要设置这个隐藏的input的value 和 img标签的src。
隐藏的input后面会通过sign up按钮，把图片的路径保存到数据库。img标签的设置，就是为了让图片能马上显示出来。
还有不要忘记了，将上传过程中旋转的图标，恢复过来。

如果上传的文件有问题，例如格式不正确，这个信息就在error方法中来输出了。格式是result.responseJSON.message，最后也不要忘记了把上传图标恢复原状了。

RegisterController

还有一点点需要修改的是，控制器中，不要忘记了加上avatar

protected function create(array $data)
{
    return User::create([
        //...

        'avatar' => $data['avatar'],
    ]);
}

整理

ajax 上传头像的功能就这样实现了，最后整理一下代码。
$.ajaxSetup这段代码应该是公用的，所以我们把它拿到common.js中。

再到public/assets/js里，新建一个upload.js，将插件的调用代码，都挪过去。
模板里，改为引用upload.js，重新来上传，功能依然是好用的。

@section('scripts')
    <script src="/assets/js/jquery.html5-fileupload.js"></script>
@endsection

【笔记功能】
上课内容和想要记住的要点，可以很方便的记录在笔记中。
请登录后再使用！

根据会员不同，笔记有不同的数量限制。

免费会员	大会员	线下班会员
5枚	无限制	无限制

升级会员，或者删除笔记可以添加新的笔记。

关闭

Laravel 技巧库

第11回 Ajax 上传（全24回）

项目 Github 地址

课程讨论 QQ 群

Laravel 技巧库（全24回）

【用户注册、登录和退出】

【Form 表单和数据验证】

【i18n 国际化与 Composer 包】

【验证码】

【Trait 与验证码生效的原理】

【用户名登录】

【发送邮件找回密码】

【QQ 登录获取用户信息】

【实现 QQ 登陆，其他第三方登录的做法】

【上传头像】

【Ajax 上传】

【Flash 消息显示】

【基本权限控制】

【依赖注入】

【Debug Bar 调优 N+1 查询】

【Markdown 格式化内容】

【自定义辅助函数】

【表单验证】

【Laravel Collective 重构 Form 】

【评论功能重构】

【评论提交 Ajax 化】

【评论提交 atwho 和 hotkeys】

【404 页面】

【Until Next Time, Goodbye!】

插件

controller

route

views

基础格式

PhotosController

完整 js

RegisterController

整理

Laravel 技巧库

第11回 Ajax 上传（全24回）

项目 Github 地址

课程讨论 QQ 群

Laravel 技巧库（全24回）

【用户注册、登录和退出】

【Form 表单和数据验证】

【i18n 国际化与 Composer 包】

【验证码】

【Trait 与验证码生效的原理】

【用户名登录】

【发送邮件找回密码】

【QQ 登录获取用户信息】

【实现 QQ 登陆，其他第三方登录的做法】

【上传头像】

【Ajax 上传】

【Flash 消息显示】

【基本权限控制】

【依赖注入】

【Debug Bar 调优 N+1 查询】

【Markdown 格式化内容】

【自定义辅助函数】

【表单验证】

【Laravel Collective 重构 Form 】

【评论功能重构】

【评论提交 Ajax 化】

【评论提交 atwho 和 hotkeys】

【404 页面】

【Until Next Time, Goodbye!】

插件

controller

route

views

基础格式

PhotosController

完整 js

RegisterController

整理

如果您对此课程感到满意，请打赏主讲教师！