图片自动上传更换图片时动态获取参数问题

提问 未结 0 447
爱咖啡
爱咖啡 2018-3-1
悬赏:50飞吻
版本:layui 2.0.1 浏览器:Chrome
情景:
有一系列图片,已经上传服务器,并且把记录保存到数据库记录中。现在打开图片展示页面把所有的图片展示出来,同时支持更改图片且自动上传(图片自动上传时需要携带之前数据库的id参数)。
代码如下:
<div  class="site-demo-flow" id="LAY_demo3">
<li th:each="image:${imageList}">
<div class="layui-upload-drag test10" id="test10">
<i class="layui-icon"><img class="layui-anim layui-anim-fadein layui-anim-scale" th:lay-src="'/fileUpload/readImage?path='+${image.imgSrc}"/></i>
<input type="hidden" th:value="${image.id}">
<p class="imgP">点击上传,或将文件拖拽到此处</p>
</div>
<button class="layui-btn layui-btn-sm layui-btn-normal" th:imgId="${image.id}"><i class="layui-icon"></i> 删除</button>
</li>
</div>
</body>
<script src="/public/static/js/jquery.min.js" charset="utf-8"></script>
<script src="/public/static/plugin/layui/layui.js" charset="utf-8"></script>
<script>
layui.use('flow', function(){
var flow = layui.flow;

flow.load({
elem: '#LAY_demo1' //流加载容器
,scrollElem: '#LAY_demo1' //滚动条所在元素,一般不用填,此处只是演示需要。
,done: function(page, next){ //执行下一页的回调

//模拟数据插入
setTimeout(function(){
var lis = [];
for(var i = 0; i < 8; i++){
lis.push('<li>'+ ( (page-1)*8 + i + 1 ) +'</li>')
}

//执行下一页渲染,第二参数为:满足“加载更多”的条件,即后面仍有分页
//pages为Ajax返回的总页数,只有当前页小于总页数的情况下,才会继续出现加载更多
next(lis.join(''), page < 10); //假设总页数为 10
}, 500);
}
});

//按屏加载图片
flow.lazyimg({
elem: '#LAY_demo3 img'
,scrollElem: '#LAY_demo3' //一般不用设置,此处只是演示需要。
});

});
layui.use('upload', function(){
var $ = layui.jquery
,upload = layui.upload;
//拖拽上传
upload.render({
elem: '#test10'
,url: '/fileUpload/imgUpload'
,data:{"id":'此处是动态的数据''}
,before: function( object){
console.log(object);
var item = this.item;
$("#tempImageId").val(item.find("imageId").val());
}
,done: function(res, index, upload){
if(res.code == 0) { //上传成功
//预读本地文件示例,不支持ie8
var item = this.item;
item.find("img").attr('src','/fileUpload/readImage?path='+res.src);
}else{
console.log(res)
}
}
});
});
</script>
问题:
1.是否在某个回调方法中会把当前选中的dom对象传递过来(这样我可以把这个elem下的隐藏参数获取到,也就可以携带参数id到后台)
2.如果1不行,那么我该如何实现我的情景
回帖
  • 消灭零回复