Laravel項(xiàng)目中如何實(shí)現(xiàn)Ajax上傳用戶頭像-創(chuàng)新互聯(lián)

小編給大家分享一下Laravel項(xiàng)目中如何實(shí)現(xiàn)Ajax上傳用戶頭像，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)專注于企業(yè)成都全網(wǎng)營銷推廣、網(wǎng)站重做改版、衢州網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、HTML5、商城開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為衢州等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

在Laravel項(xiàng)目中實(shí)現(xiàn)Ajax上傳用戶頭像

在編寫web程序的過程中，經(jīng)常會(huì)遇到一個(gè)經(jīng)典的文件上傳場景：上傳頭像（圖片）?；趯?duì)好的用戶體驗(yàn)的追求，寫一下之前在項(xiàng)目中實(shí)現(xiàn)在Laravel項(xiàng)目中的Ajax上傳頭像。

1.配置路由

在Laravel的routes.php中設(shè)置路由：

Route::get('/avatar/upload','UsersController@avatar');
Route::post('/avatar/upload','UsersController@avatarUpload');

2.配置控制器

在UsersController.php中增加對(duì)應(yīng)的avatar和avatarUpload這兩個(gè)方法，前者用來渲染視圖，后者處理實(shí)際上傳的圖像文件。

 public function avatar()
    {

        return view('users.avatar');
    }

  public function avatarUpload()
    {
    //some codes to deal with upload avatar
    }

3.編寫前端代碼

這其實(shí)就是在對(duì)應(yīng)的users/文件夾的avatar.blade.php視圖文件中設(shè)置樣式,以下的HTML的各個(gè)標(biāo)簽可以根據(jù)自己的情況設(shè)置class和id:

<header class="profile-header">
 <img id="user-avatar" src="https://wt-prj.oss.aliyuncs.com/0d06af79c49d4e08abb1ab3f7ab6e860/772c684b-10a4-43cf-8eec-dda9e28a5a23.png">

<p id="validation-errors"></p>

<p class="avatar-upload" id="avatar-upload">
 {!! Form::open( [ 'url' => ['/avatar/upload/api'], 'method' => 'POST', 'id' => 'upload', 'files' => true ] ) !!}
<a href="#" class="btn button-change-profile-picture">
<label for="upload-profile-picture">
<span id="upload-avatar">更換新頭像</span>
 <input name="image" id="image" type="file" class="manual-file-chooser js-manual-file-chooser js-avatar-field">
</label>
</a>
{!! Form::close() !!}


<p class="span5">
<p id="output" style="display:none">
</p>
</p>


<span id="filename"></span>
 </header>

在js中實(shí)現(xiàn)Ajax請(qǐng)求，這里的Ajax借助了Jquery的第三方插件http://malsup.com/jquery/form/：

$(document).ready(function() {
            var options = {
                beforeSubmit:  showRequest,
                success:       showResponse,
                dataType: 'json'
            };
            $('#image').on('change', function(){
                $('#upload-avatar').html('正在上傳...');
                $('#upload').ajaxForm(options).submit();
            });
        });
    function showRequest() {
        $("#validation-errors").hide().empty();
        $("#output").css('display','none');
        return true;
    }

    function showResponse(response)  {
        if(response.success == false)
        {
            var responseErrors = response.errors;
            $.each(responseErrors, function(index, value)
            {
                if (value.length != 0)
                {
                    $("#validation-errors").append('<p class="alert alert-error"><strong>'+ value +'</strong><p>');
                }
            });
            $("#validation-errors").show();
        } else {

          $('#user-avatar').attr('src',response.avatar);

        }
    }

4.處理上傳的圖片

回到UsersController.php中的avatarUpload方法，現(xiàn)在就可以處理上傳上來的圖片了：

public function avatar()
    {
        $this->wrongTokenAjax();
        $file = Input::file('image');
        $input = array('image' => $file);
        $rules = array(
            'image' => 'image'
        );
        $validator = Validator::make($input, $rules);
        if ( $validator->fails() ) {
            return Response::json([
                'success' => false,
                'errors' => $validator->getMessageBag()->toArray()
            ]);

        }

        $destinationPath = 'uploads/';
        $filename = $file->getClientOriginalName();
        $file->move($destinationPath, $filename);
                return Response::json(
                    [
                        'success' => true,
                        'avatar' => asset($destinationPath.$filename),
                    ]
                );
            }



    }

注：在上傳之前，確認(rèn)在laravel的public/目錄下創(chuàng)建了uploads/文件夾，并給以相應(yīng)的權(quán)限，如：

sudo chmod -R 777 uploads/

在上面的avatarUpload方法中，有一個(gè)wrongTokenAjax方法，這是用來檢驗(yàn)Laravel體系的token值的，同樣是在UsersController.php中添加：

 public function wrongTokenAjax()
    {
        if ( Session::token() !== Request::get('_token') ) {
            $response = [
                'status' => false,
                'errors' => 'Wrong Token',
            ];

            return Response::json($response);
        }

    }

5.最后

到這里一個(gè)簡單的Ajax上傳圖片的demo就完成了，在實(shí)際的開發(fā)中，我們還需要考慮以下幾個(gè)問題：

根據(jù)用戶的不同用戶名或者用戶id來創(chuàng)建不同的文件夾，這些都可以在avatarUpload方法中$file->move($destinationPath, $filename)之前使用
```
File::exists($username) or File::makeDirectory($username);
```
更新數(shù)據(jù)庫中用戶的avatar字段，大概是這樣的：在avatarUpload方法返回?cái)?shù)據(jù)之前，使用下面的類似語句：
```
$user->avatar = your_avtar_upload_path;

$user->save();
```
如果你還想更進(jìn)一步改善體驗(yàn)，提供一些圖片的裁剪和添加濾鏡等功能，可以同時(shí)使用 Intervention/Image php包和Jcrop js圖片裁剪實(shí)現(xiàn)，比如在：
```
function showResponse(response)  {

}
```
中，如果成功的返回圖片，就在$('#user-avatar').attr('src',response.avatar)后執(zhí)行：
```
 $('#user-avatar').Jcrop({
                aspectRatio: 1,
                onSelect: updateCoords,
                setSelect: [120,120,10,10]
                });
```
就可以在前端實(shí)現(xiàn)圖片裁剪，然后將相應(yīng)的裁剪數(shù)據(jù)如裁剪圖片的height,width,x-align.y-align等傳到后端處理就可以，使用Intervention/Image的話，在后端處理圖片就是輕而易舉的事情了！

以上是“Laravel項(xiàng)目中如何實(shí)現(xiàn)Ajax上傳用戶頭像”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

新聞標(biāo)題：Laravel項(xiàng)目中如何實(shí)現(xiàn)Ajax上傳用戶頭像-創(chuàng)新互聯(lián)
文章路徑：http://jinyejixie.com/article26/cceocg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、定制開發(fā)、網(wǎng)站內(nèi)鏈、外貿(mào)建站、面包屑導(dǎo)航、品牌網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容