Larvel5.2上传图片并显示缩略图

1.建立控制器UploadController.php

<?php namespace App\Http\Controllers;

use App\Http\Requests;
use App\Http\Controllers\Controller;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Input;
use Redirect, Response;
class UploadController extends Controller {

	 //Ajax上传图片
    public function imgUpload()
    {
        $file = Input::file('file');
        $id = Input::get('id');
        $allowed_extensions = ["png", "jpg", "gif"];
        if ($file->getClientOriginalExtension() && !in_array($file->getClientOriginalExtension(), $allowed_extensions)) {
            return ['error' => 'You may only upload png, jpg or gif.'];
        }

        $destinationPath = 'lib/uploads/images/';
        $extension = $file->getClientOriginalExtension();
        $fileName = str_random(10).'.'.$extension;
        $file->move($destinationPath, $fileName);
        return Response::json(
            [
                'success' => true,
                'pic' => asset($destinationPath.$fileName), //这里返回的是文件地址+文件名
                'id' => $id,
                'fname' => $fileName, //这里返回的是文件名
            ]
        );
    }

    
}

2.注册路由

 //图片上传
    Route::post('upload_img','UploadController@imgUpload');

3.编写upload.css,放到public/lib/css（文件夹需要自己建）

.thumb-wrap{
    overflow: hidden;
}
.thumb-wrap img{
    margin-top: 10px;
}
.pic-upload{
    width: 100%;
    height: 34px;
    margin-bottom: 10px;
}
#thumb-show{
    max-width: 100%;
    max-height: 300px;
}
.upload-mask{
    position: fixed;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.4);
    z-index: 1000;
}
.upload-file .close{
    cursor: pointer;
    font-size: 14px;
}

.upload-file{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -105px;
    margin-left: -150px;
    max-width: 300px;
    z-index: 1001;
    display: none;
}

.upload-mask{
    display: none;
}

4.在resource/views/建立模板upload_img.blade.php，form要老老实实的用标签写，否则报错

<div class="upload-mask">
</div>
<div class="panel panel-info upload-file">
    <div class="panel-heading">
        上传图片
        <span class="close pull-right">关闭</span>
    </div>
    <div class="panel-body">
        <div id="validation-errors"></div>
        <form action="{{ URL('upload_img') }}" method='post' enctype="multipart/form-data" id='imgForm'>
        
        <div class="form-group">
            <label>图片上传</label>
            <span class="require">(*)</span>
            <input id="thumb" name="file" type="file"  required="required">
            <input id="imgID"  type="hidden" name="id" value="">
           
        </div>
       </form>
    </div>
    <div class="panel-footer">
    </div>
</div>

5.建立上传的js，可以放到模板upload_img里面去

    $(function(){
    //上传图片相关

    $('.upload-mask').on('click',function(){
        $(this).hide();
        $('.upload-file').hide();
    })

    $('.upload-file .close').on('click',function(){
        $('.upload-mask').hide();
        $('.upload-file').hide();
    })

    var imgSrc = $('.pic-upload').next().attr('src');
    console.log(imgSrc);
    if(imgSrc == ''){
        $('.pic-upload').next().css('display','none');
    }
    $('.pic-upload').on('click',function(){
        $('.upload-mask').show();
        $('.upload-file').show();
        console.log($(this).next().attr('id'));
        var imgID = $(this).next().attr('id');
        $('#imgID').attr('value',imgID);
    })

    //ajax 上传
    $(document).ready(function() {
        var options = {
            beforeSubmit:  showRequest,
            success:       showResponse,
            dataType: 'json'
        };
        $('#imgForm input[name=file]').on('change', function(){
            //$('#upload-avatar').html('正在上传...');
            $('#imgForm').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 {

            $('.upload-mask').hide();
            $('.upload-file').hide();
            $('.pic-upload').next().css('display','block');

            console.log(response.pic);
            // 生成图片地址
            $("#"+response.id).attr('src',response.pic); 
            $("#"+response.id).next().attr('value',response.fname); //我这里使用的是返回文件名，如果是本地使用，吧fname改成pic

        }
    }

})

6.在需要使用的模版中使用，需要调用jquery和jquery.form和upload_img.blade.php文件

<link href="{{asset('lib/css/upload.css')}}" rel="stylesheet">
<div class="form-group row">
     <label class="col-md-2 control-label">活动图片</label>
     <div class="col-md-4 thumb-wrap">
     <div class="pic-upload btn btn-block btn-info btn-flat" title="点击上传">点击上传</div>
          <img id="logo" src="{{ URL($act->activity_pic) }}" width='50%' height='30%'>
          <input type="hidden" name="logo" value="">
      </div>
 </div>
<script src="{{asset('lib/js/jquery-2.0.3.min.js')}}"></script>
<!-- 图片上传的js和引用文件 -->
<script src="{{asset('lib/js/jquery.form.js')}}"></script>
@include('upload_img')

7.如果function ajaxform(...) doesn't exist，那么就是你jquery加载了两次，第二次会覆盖第一次，去谷歌浏览器F12,NETWORK可以看到加载了几次