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

相关内容

深入理解云服务器Mongo...
本文深入解析了云服务器上MongoDB的集群架构,包括副本集、分片...
2025-08-30 01:23:42
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

热门资讯

object json转化为数... //调用api 程序,通知商户订单异常 20200314 public function callt...
tp5 composer we... 问题: 正常使用中的tp5程序需要安装微信支付v3。 tp5使用cmd面板composer requ...
tp5 jquery判断手机端... application--common.php中添加如下代码 //函数作用是判断用户打开的是手机端还...
Laravel 5.5 .No... 创建了新的laravel项目后, 运行提示:No application encryption ke...
laravel 对接支付宝当面... 第一步 开发中心网页移动应用下支付接入 第二步 创建应用后需添加可支付的方式 第三步 配置公钥与私钥...
php 打印date函数出现错... 问题描述: 我使用的是phpstudy,在练习时间函数的时候,打印出现在的时间,date(Y-m-d...
php函数substr_rep... php函数substr_replace从某个位置替换或删除或插入字符串
Laravel 查看SQL操作... 方法一:临时打印操作记录 DB::connection()-enableQueryLog(); # ...
生成随机字符唯一标识符guid... /** * @param $length * @return string * 生成随机字符串 */...
layui缩略图 div class=layui-form-item label class=layui-form-l...