前端:
<div class="layui-form-item">
<label class="layui-form-label">LOGO</label>
<div class="layui-input-block">
<div class="layui-upload-list">
<img class="layui-upload-img" id="logo-img" {if !empty($webset) && !empty($webset.logo)}src="{$webset.logo}"{/if}>
</div>
<button type="button" class="layui-btn" id="logo">
<i class="layui-icon"></i>上传图片
</button>
<input type="hidden" name="logo" autocomplete="off" class="layui-input" value="{if !empty($webset)}{$webset.logo}{/if}">
</div>
</div>
layui.use(['jquery', 'layer', 'form', 'upload'], function(){
var layer = layui.layer
,form = layui.form
,upload = layui.upload
,$ = layui.$;
var uploadLogo = upload.render({
elem: '#logo' //绑定元素
,url: '{:url("upload")}' //上传接口
,field:'image'
,before: function(obj){
layer.load(2); //上传loading
}
,done: function(res){
//上传完毕回调
layer.closeAll('loading');
if(res.status == 1){
$('#logo-img').attr('src', res.data);
$("input[name='logo']").val(res.data);
}else{
layer.msg(res.msg);
}
}
,error: function(){
layer.closeAll('loading');
//请求异常回调
layer.msg("上传失败,请重新上传");
}
});
这里是提交表单和之后的处理逻辑的ajax
})
后端:
/**
* 上传
* @param string $path 路径
* @param string $ext 类型
* @param string $name 是否保留原名称 0 不保留 1 保留
*/
function upload($path='uploads',$ext='jpg,png,gif',$name=0){
//没有路径就创建保存目录
if (!file_exists($path) && !mkdir($path, 0777, true)) {
ajaxReturn(0,'目录创建失败');
}
$file = \request()->file('excel');
if($name == 0){
$info = $file->rule('md5')->validate(['ext' => $ext])->move(Env::get('root_path') . $path);
}else{
$info = $file->validate(['ext' => $ext])->move(Env::get('root_path') . $path,'');
}
if ($info) {
$data['code'] = 0;
$data['msg'] = '上传成功';
$data['data'] = ['src'=> $path . DIRECTORY_SEPARATOR . $info->getSaveName(),'title'=>$info->getSaveName()];
exit(json_encode($data));
} else {
$data['code'] = 1;
$data['msg'] = '上传失败';
$data['data'] = ['src'=> '','title'=>''];
exit(json_encode($data));
}
}