网站首页 laravel框架
laravel-ajax上传_5.2版本
发布时间:1970-01-01 00:00查看次数:3659
laravel 上传文件 图片过程 以及前台模板
1.上传使用到2个方面的东西 一个是FORM::OPEN
这个需要composer 安装HTML 拓展
1.安装方法如下
composer require illuminate/html
2.找到config/app.php
provider数组注册下边的服务
Illuminate\Html\HtmlServiceProvider::class,
aliases数组中 映射字段
'Form' => 'Illuminate\Html\FormFacade',
'Html' => 'Illuminate\Html\HtmlFacade',
3.因为laraverl升级的原因HtmlServiceProvider会报错
解决方法:
服务容器的 bindShared 方法被废弃,使用singleton 方法。
==============完成laravel框架支持工作========================
1.开始注册路由
Route::any('upload','ArticleController@upload_img');//上传图片
2.方法实现
$tmp = Input::all();
if($tmp){
$file = Input::file('file');
$id = Input::get('id');
$allowed_extensions = ["png", "jpg", "gif"];
$huiZhui = $file->getClientOriginalExtension();
//取后缀名
if ($huiZhui && !in_array($huiZhui, $allowed_extensions)) {
return ['error' => 'You may only upload png, jpg or gif.'];
}
$destinationPath = 'uploads/images/';
$extension = $huiZhui;
$fileName = str_random(10).'.'.$extension;
$file->move($destinationPath, $fileName);
return json_encode(
[
'success' => true,
'pic' => asset($destinationPath.$fileName),
'id' => $id
]
);
}else{
return view('upload.upload_img');
}
}
3.=========================前台模板添加========================
1. 页面部分
{{--laravel 图片上传部分开始--}}
显示图片服务器位置
<input type="text" id="art_min_img" name="art_min_img" style="width: 280px;">
<input type="button" value="图片上传" class="pic-upload" style="width: 160px;">
<img id="logo" src="">
<script src="{{asset('/resources/views/upload/jquery-form.js')}}"></script>
<script src="{{asset('/resources/views/upload/upload.js')}}"></script>
<link rel="stylesheet" href="{{asset('/resources/views/upload/upload_img.css')}}">
{{--laravel AJAX图片上传图片结束--}}
=================================================================
2.upload_img.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;
z-index: 1001;
display: none;
}
.upload-mask{
display: none;
}
#logo{
display: none;
}
3.======================upload.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');
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();
});
});
//AJAX上传完成后回调函数
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');
//前台文字显示图片地址 以及IMG显示图片
$('#art_min_img').val(response.pic);
$("#"+response.id).attr('src',response.tmp_url);
$("#"+response.id).next().attr('value',response.pic);
}
}
})
4.=========================upload_img.blade.php==========================
<!-- 上传图片div /S-->
<div class="upload-mask">
</div>
<div class="upload-file" style="background:RGBA(0,150,0,0.3);padding:2px;width: 300px;height: 200px">
<div class="upload-main">
<div class="panel-heading" style="background:greenyellow;width: 298px;height:38px;padding-top: 5px">
上传图片
<span class="close pull-right">关闭</span>
</div>
<div class="panel-body" style="background:white;width: 298px;height:160px">
{!! Form::open(array('url' =>['/admin/article/upload'], 'method' => 'post', 'id'=>'imgForm', 'files'=>true)) !!}
<div class="form-group">
<label style="color: #aa7700">请选择要上传的图片</label>
<br>
<br>
<br>
<br>
<input id="thumb" name="file" type="file" required="required">
<input id="imgID" type="hidden" name="id" value="">
</div>
{!!Form::close()!!}
</div>
</div>
</div>
<!-- 上传图片div /E-->
=========================================================================
设置完成后要载入
@include('upload.upload_img')
完成缩略图片 上传
关键字词:laravel-ajax上传_5.2版本