layui缩略图
未知
2021-07-02 16:14:08
0次
<div class="layui-form-item">
<label class="layui-form-label">上传缩略图</label>
<div class="layui-input-block">
<button type="button" class="layui-btn" id="test1">
<i class="layui-icon"></i>上传缩略图
</button>
<div class="layui-upload-list">
<img class="layui-upload-img" width="100px" height="100px" id="demo1">
<p id="demoText"></p>
</div>
<input type="hidden" name="product_icon" id="pichidden">
</div>
</div>
var uploadInst = upload.render({
elem:'#test1'
,url:"{:url('allow/upload','field=product_icon')}"
,accept:'images' // 允许上传的文件类型
,exts: 'jpg|png|jpeg'//允许上传的文件后缀
,acceptMime: 'image/*'//规定打开文件选择框时,筛选出的文件类型
,size:30//设置文件最大可允许上传的大小,单位 KB
,field:"product_icon"//设定文件域的字段名
,auto:true // 自动上传
,drag:false//是否接受拖拽的文件上传默认是
,before:function (obj) {
// console.log(obj);
// 预览
obj.preview(function(index,file,result) {
// console.log(file.name); //图片地址
// console.log(file.type); //图片格式
// console.log(file.size); //图片大小
// console.log(file); //图片地址
$('#demo1').attr('src',result); //图片链接 base64
});
}
// 上传成功回调
,done:function(res) {
console.log(res);
if (res.code == 1000) {
$("#pichidden").val(res.data);
layer.msg(res.msg);
}else{
layer.msg(res.msg,{icon:2});
}
}
// 上传失败回调
,error:function(index,upload) {
// 上传失败
console.log(index);
}
});
//执行产品图片上传
public function upload($field){
//获取请求的数据
$file=request()->file($field);
$info=$file->move(ROOT_PATH.'public'.DS.'static'.DS.'admin'.DS.'image'.DS.$field);
if($info){
return json(['code'=>1000,'msg'=>'上传成功','data'=>$info->getSaveName()]);
}else{
return json(['code'=>1001,'msg'=>$file->getError(),'data'=>'']);
}
}
相关内容