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">&#xe67c;</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'=>'']);
            
        }
    }

相关内容

穿梭框layui.tran...
div id=test1 class=demo-transfer/...
2024-04-09 15:59:09
tp5和layui表单提交...
form class=layui-form layui-form-...
2024-04-09 14:45:31
tp5 layui登录时失...
使用tp5和layui框架结合的登录页面,在首次登录时不出现验证码...
2024-02-26 09:59:58
layui数据接口请求异常...
layui数据接口请求异常:parsererror
2023-12-16 15:43:27
layui thinkph...
layui thinkphp表单图片上传upload
2023-12-08 10:54:34
layui中出错Unexp...
layui中出错Unexpected identifier
2023-12-07 17:23:41

热门资讯

tp5 jquery判断手机端... application--common.php中添加如下代码 //函数作用是判断用户打开的是手机端还...
Laravel 5.5 .No... 创建了新的laravel项目后, 运行提示:No application encryption ke...
php 打印date函数出现错... 问题描述: 我使用的是phpstudy,在练习时间函数的时候,打印出现在的时间,date(Y-m-d...
生成随机字符唯一标识符guid... /** * @param $length * @return string * 生成随机字符串 */...
layui缩略图 div class=layui-form-item label class=layui-form-l...
php函数substr_rep... php函数substr_replace从某个位置替换或删除或插入字符串
Laravel 引入自定义类库... 强烈建议引入的类 都是含有命名空间的,这样使用起来就不会出现重名的情况。!!当然,没有命名空间也可以...
object json转化为数... //调用api 程序,通知商户订单异常 20200314 public function callt...
Laravel 查看SQL操作... 方法一:临时打印操作记录 DB::connection()-enableQueryLog(); # ...
php银行开放平台接口:pfx... 问题描述: 对接易通银行,他们的服务开放平台是java开发,而我的是php,现在需要php版本的SD...