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'=>'']);
            
        }
    }

相关内容

Minio在云服务器中的存...
本文介绍了Minio在云服务器中的存储优化策略,包括空间规划与布局...
2025-02-07 14:00:46
高性能Nginx服务器配置...
Nginx服务器性能优化指南:包含基本配置、工作进程与连接数、缓存...
2025-01-24 19:46:45
PHP与BZ2文件处理技术...
本文详细介绍了PHP与BZ2文件处理技术,包括文件读写、BZ2压缩...
2025-01-23 05:46:41
PHP中高效处理BZ2文件...
在PHP中高效处理BZ2文件,需选合适库与工具,优化文件读写操作,...
2025-01-23 05:23:44
PHP中BZ2文件压缩性能...
PHP中优化BZ2文件压缩性能的策略包括:选择合适压缩级别、减少不...
2025-01-23 05:00:45
如何使用PHP处理BZ2文...
本文介绍了如何在PHP中处理BZ2文件压缩数据,包括安装和启用PH...
2025-01-23 04:24:03

热门资讯

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