//监听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'));
}
}
发表评论 取消回复