//监听heyuedesc的变化
                // 拦截 #heyuedesc 的赋值操作,手动触发 input 事件
                var heyuedesc = document.getElementById("heyuedesc");
                if (heyuedesc) {
                    var descriptor = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, "value");
                    Object.defineProperty(heyuedesc, "value", {
                        set: function(val) {
                            descriptor.set.call(this, val);
                            $(this).trigger("input");
                        },
                        get: function() {
                            return descriptor.get.call(this);
                        }
                    });
                }

                var fileanmeurl=$("#p-heye_file").data("path");
                $("#heyuedesc").on("input",function(){
                    console.log("==heyuedesc==");
                    //循环#p-heye_file中的li的.upfilename
                    $("#p-heye_file").find(".upfilename").each(function(){
                        var url=$(this).data("fileurl");
                        var index=$(this).data("index");
                        //ajax获取
                        $.ajax({
                            url:fileanmeurl,
                            type:"get",
                            data:{url:url},
                            success:function(res){
                                if(res.code==1){
                                    $(".n"+index).text(res.data);
                                }
                            }
                        });
                    });
                });
                $("#heyuedesc").trigger("input");

<!--ul需要添加 data-template和data-name属性,并一一对应且唯一 -->
            <ul class="row list-inline plupload-preview" id="p-heye_file" data-template="desctpl" data-name="row[heye_desc]" data-path="{$_SERVER['SCRIPT_NAME']}/ajax/getupfilename"></ul>

            <!--请注意 ul和textarea间不能存在其它任何元素,实际开发中textarea应该添加个hidden进行隐藏-->
            <textarea name="row[heye_desc]" id="heyuedesc" class="form-control" style="margin-top:5px;"></textarea>
            
            <style>
                .thumbnail {position: relative;}
                .thumbnail .upfilename {position: absolute;bottom: 0;left: 0; width: 100%; padding: 5px; margin: 0; background: rgba(0,0,0,0.3); color: #fff; font-size: 12px; text-align: center;}
            </style>

            <!--这里自定义图片预览的模板 开始-->
            <script type="text/html" id="desctpl">
                <li class="col-xs-3">
                    <a href="<%=fullurl%>" data-url="<%=url%>" target="_blank" class="thumbnail" id="heye_file_<%=index%>">
                        <img src="{$_SERVER['SCRIPT_NAME']}/ajax/icon" alt="<%=value?value['name']:''%>">
                        <p class="upfilename n<%=index%>" data-index="<%=index%>" data-fileurl="<%=url%>"></p>
                    </a>

                    <input type="text" name="row[heye_desc][<%=index%>][name]" class="form-control mb-1" placeholder="名称" value="<%=value?value['name']:''%>"/>

                    <input type="text" name="row[heye_desc][<%=index%>][info]" class="form-control mb-1" placeholder="描述" value="<%=value?value['info']:''%>"/>
                    <a href="javascript:;" class="btn btn-danger btn-xs btn-trash"><i class="fa fa-trash"></i></a>
                </li>
            </script>



 //application\admin\controller\Ajax.php
    public function getupfilename(){
        $url = $this->request->get("url");
        $filename=db("attachment")->where("url",$url)->value("filename");
        if($filename){
            $this->success('ok', '', $filename);
        }else{
            $this->error(__('File not found'));
        }
   }


点赞(0)

评论列表 共有 0 条评论

暂无评论
立即
投稿
发表
评论
返回
顶部