larave ajax php 图片上传,Laravel 5.1 Ajax上传图片方法

最近在做的项目基于Laravel 5.1开发，需要用到Ajax上传，查了些资料，自己整理了下可用的方法。

控制器：

UploadController.php

namespace App\Http\Controllers\Admin;

use App\Http\Requests;

use App\Http\Controllers\Controller;

use YuanChao\Editor\EndaEditor;

use Redirect, Input, 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 = '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

]

);

}

}

模板：

upload_img.blade.php

上传图片

关闭

{!! Form::open( array('url' =>['/admin/upload_img'], 'method' => 'post', 'id'=>'imgForm', 'files'=>true) ) !!}

图片上传

(*)

{!!Form::close()!!}

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;

}

JS：

需要jQuery库 和jQuery.form.js

$(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('

'+ value +'

');

}

});

$("#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.pic);

}

}

})

路由：

//图片上传

Route::post('upload_img','UploadController@imgUpload');

现在需要在模板中include 上传图片模板

(我的放在admin目录下的common目录下，根据自己放的位置更改)

@include('admin.common.upload_img')

现在我在create.blade.php中使用

缩略图

点击上传

效果如下图：

1.未上传状态

2.点击上传

3.上传完成

有问题可以在下面留言