15
06月
2020
html
<div class="layui-form-item"> <label class="layui-form-label red-star">图片</label> <div class="layui-input-block"> <button type="button" class="layui-btn layui-btn-primary" id="upload"> <i class="layui-icon"></i>上传图片 </button> <input class="layui-upload-file" type="file" accept="image/*" name="file"> <div id="uploadtips" class="uploadtips"></div> <div class="layui-form-mid layui-word-aux" style="display: inline-block; float: none;"> 首页图片大小：1920 x 500，内页：1920 x 350 </div> </div> <div class="upload-preview"></div> </div>
js
layui.use(['jquery', 'form', 'table'], function () { //使用layui引入jq
var $ = jQuery = layui.$,
upload = layui.upload;
//普通图片上传
var uploadInst = upload.render({
elem: '#upload',
url: "/index/admin/bannerAddimg",
type:"POST",
size: 2048,
acceptMime: 'image/*',
before: function (obj) {
layer.load(2);
},
done: function (res) {
console.log(res);
layer.closeAll('loading'); //关闭加载
$('#uploadtips').html(''); //清空提示
if (res.code) {
$('.upload-preview').html('<img src="' + res.url + '">');
$('input[name=litpic]').val(res.url);
return layer.msg(res.msg);
} else {
return layer.msg(res.msg, {icon: 5, shift: 6, shade: [0.2, '#000']});
}
//上传成功
},
progress: function (e, percent) {
$('#uploadtips').html(percent + '%');
},
error: function () {
//失败状态，并实现重传
layer.closeAll('loading');
$('#uploadtips').html('<a class="layui-btn layui-btn-xs layui-btn-danger btn-reload">重试</a>');
$('.btn-reload').on('click', function () {
uploadInst.upload();
});
}
});
//…
});php
public function img(Request $request)
{
$file = $request->file('file');
if (!empty($file)){
//成功上传后 获取上传信息
$info = $file->validate(['ext'=>'jpg,png,gif'])->move(ROOT_PATH . 'public'.DS.'uploads');
if ($info){
//获取图片的存放相对路径
$filePath = '/uploads/'.$info->getSaveName();
$filePath = str_replace('\\', '/', $filePath);
//上传成功路径存入session
Session::set('index_banners',$filePath);
}else{
// 上传失败获取错误信息
$data['code'] = 0;
$data['msg'] = $file->getError();
return json($data);
}
}
$data['code'] = 1;
$data['url'] = $filePath;
$data['msg'] = '保存成功';
return json($data);
}