PHP Laravel Vue.js 视频教程

使用Ajax上传用户头像
评论发表于 7年前

我引入了2个jquery，我把2个合并了就解决了，不知道你是什么问题

使用Ajax上传用户头像
评论发表于 7年前

解决了，搞了大半天，谢谢啦

使用Ajax上传用户头像
评论发表于 7年前

我把2个合并了，那个错误解决了
但还是不能传头像浏览器报Failed to load resource: the server responded with a status of 500 (Internal Server Error)

使用Ajax上传用户头像
评论发表于 7年前

最后那个是美化社区那个视频时候引入的啊

使用Ajax上传用户头像
评论发表于 7年前

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">
<title>laravel app</title>
<link rel="stylesheet" href="/css/bootstrap.css">
<link rel="stylesheet" href="/css/font-awesome.css">
<link rel="stylesheet" href="/css/style.css">

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="/js/jquery.form.js" ></script>
   <script src="//cdn.bootcss.com/tether/1.3.6/js/tether.min.js"></script>
   <script src="/js/bootstrap.min.js"></script>

</head>
<body>
<nav class="navbar navbar-default navbar-static-top">

<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/">Laravel app</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="/discussions">首页</a></li>
            <li><a href="#about"></a></li>
            <li><a href="#contact"></a></li>
            <li class="dropdown">
               {-- <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span></a>--}
                <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li><a href="#">Separated link</a></li>
                    <li><a href="#">One more separated link</a></li>
                </ul>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            @if(Auth::check())

                <li >
                    <a id="dLabel" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                        {Auth::user()->name}

                    </a>
                    <ul class="dropdown-menu" aria-labelledby="dLabel">
                        <li><a href="/user/avatar"> <i class="fa fa-user"></i> 更换头像</a></li>
                        <li><a href="#"> <i class="fa fa-cog"></i> 更换密码</a></li>
                        <li><a href="#"> <i class="fa fa-heart"></i> 特别感谢</a></li>
                        <li role="separator" class="divider"></li>
                        <li> <a href="/logout">  <i class="fa fa-sign-out"></i> 退出登录</a></li>
                    </ul>
                </li>

                 <li><img src="{Auth::user()->avatar}" class="img-circle" width="50" height="50" alt=""></li>
            @else
                <li ><a href="/user/login">登录 </a></li>
            <li><a href="/user/register">注册</a></li>
                @endif
        </ul>
    </div><!--/.nav-collapse -->
</div>

</nav>
@yield('content')
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

使用Ajax上传用户头像
评论发表于 7年前

引入是放在app模板的版本换了好多个

使用Ajax上传用户头像
评论发表于 7年前

@extends('app')
@section('content')

  <div class="row">
       <div class="col-md-6 col-md-offset-3">
             <div class="text-center">
                 <div id="validation-errors"></div>
                         <img src="{Auth::user()->avatar}" width="120" class="img-circle" id="user-avatar" alt="">
                         {!! Form::open(['url'=>'/avatar','files'=>true,'id'=>'avatar']) !!}
                         <div class="text-center">
                             <button type="button" class="btn btn-success avatar-button" id="upload-avatar">上传新的头像</button>
                         </div>
                         {!! Form::file('avatar',['class'=>'avatar','id'=>'image']) !!}
                         {!! Form::close() !!}
                         <div class="span5">
                             <div id="output" style="display:none">
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
   </div>

$(document).ready(function() {
    var options = {
        beforeSubmit:  showRequest,
        success:       showResponse,
        dataType: 'json'
    };
    $('#image').on('change', function(){
        $('#upload-avatar').html('正在上传...');
        $('#avatar').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('<div class="alert alert-error"><strong>'+ value +'</strong><div>');
            }
        });
        $("#validation-errors").show();
    } else {
        $('#user-avatar').attr('src',response.avatar);
        $('#upload-avatar').html('更换新的头像');
    }
}

</script>
@stop
浏览器报错
Uncaught TypeError: $(...).ajaxForm is not a function at HTMLInputElement.<anonymous> (avatar:100) at HTMLInputElement.dispatch (jquery-3.0.0.min.js:3) at HTMLInputElement.q.handle (jquery-3.0.0.min.js:3)

使用Ajax上传用户头像
评论发表于 7年前

是这个啊
public function changeAvatar(Request $request)

{
    $file=$request->file('avatar');
    $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=\Auth::user()->id.'_'.time().$file->getClientOriginalName();
    $file->move($destinationPath,$filename);
    \Image::make($destinationPath.$filename)->fit(200)->save();
    $user=User::find(\Auth::user()->id);
    $user->avatar='/'.$destinationPath.$filename;
    $user->save();

return \Response::json([
    'success'=>true,
    'avatar'=>asset($destinationPath.$filename),
]);
}这是控制器的

使用Ajax上传用户头像
评论发表于 7年前

点上传一直显示正在上传

使用Ajax上传用户头像
评论发表于 7年前

没有其他错误
/js/jquery.form.js好像没起作用

使用Ajax上传用户头像
评论发表于 7年前

<script src="/js/bootstrap.min.js"></script>
<script src="/js/jquery.form.js"></script>

就是放在之后啊

那天与你邂逅的波哥

1480 经验值