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

最新推荐文章于 2023-07-26 17:13:11 发布

张高伟

最新推荐文章于 2023-07-26 17:13:11 发布

阅读量365

点赞数

分类专栏： php

本文链接：https://blog.csdn.net/qq_36663951/article/details/76167833

版权

php 专栏收录该内容

434 篇文章 2 订阅

订阅专栏

1.建立控制器UploadController.PHP

[php] view plain copy print ?

<?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.注册路由

[php] view plain copy print ?

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

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

[css] view plain copy print ?

.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要老老实实的用标签写，否则报错

[html] view plain copy print ?

<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里面去

[javascript] view plain copy print ?

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