记layui upload 上传问题

 控件没有写 图片上传  预览界面进行删除之类的操作

第一个问题 预览删除X 遇到 onlick 后函数未定义问题

delImage()未定义 ,以前有说span 下是div 的子,span 的事件冒泡给div了, 在这里当前情况下没存在这个问题.不是这个问题引起的.
后发现是函数应该定义为全局函数  也就是

delImage =function(参数){} 的方式.

Uncaught ReferenceError: updatemsgconf is not defined
    at HTMLAnchorElement.onclick
 

解决办法：
用一个全局变量去定义onclick的点击函数就好了。

updatemsgconf = function (id){
}
deletemsgconf = function (id){
}
这样就不会报错了，正常调用



 总结：
1、如果函数写在$(functiong{ })或者$().ready(function () {});内部，那么 οnclick="updatemsgconf()"; 时 ,不能写成  function updatemsgconf (){}，也不能写成var updatemsgconf = function(){}，只能写成updatemsgconf = function(){}。

2、如果函数写在$(functiong{ })外部，就不会有提示未定义的情况发生。其实还是写法上的bug引起的，写在初始化函数内部相当于函数套函数。
————————————————
版权声明：本文为CSDN博主「追梦赤子心刘大哥」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_37035946/article/details/102581589

 

 

 

  upload.render({
            elem: '#imagebutton1'
            ,url: '/xxxxxx/LAFIImg' //改成您自己的上传接口
            ,multiple: true
            ,before: function(obj){

                this.data = {"key1": "value","LoanID":$("#LoanID").val()};
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    console.log(index);
                    console.log(file);
                    $('#demo1').append('<div class="img-content"><img src="'+ result +'" alt="'+ file.name +'"  class="layui-upload-img">  <span onclick="javascript:delImage(this,'+index+')">X</span></div>')
                });
            }
            ,done: function(data){
                if(data.res==="ok")
                {
                    //上传完毕 需返回LoanID 修改
                    $("#xxx").val(data.LoanID);
                    alert("上传成功!");
                }else
                {
                    //删掉预览
                    alert(data.res);
                }

            }
        });

第二个问题

× 事件删除同级包括自己节点问题,也就是去掉图片节点的问题

子事件中无法直接删除父节点,需要先得到父节点,然后循环删子节点.代码如下

      delImage=  function(thisspan,index){
            //删除服务器图片
            delimage(index);
           var p= thisspan.parentNode;
            var childs = p.childNodes;
            for(var i = childs.length - 1; i >= 0; i--) {
                alert(childs[i].nodeName);
                p.removeChild(childs[i]);
            }

           // var p2 = document.getElementById("p2");
           // var body = document.getElementById("body");
           // body.removeChild(p2);
       //     p.removeChild();
            //获取下标
            //  var subscript=$("#demo2 img").index(thisimg);
            //删除图片
          //  thisimg.remove();
            //删除数组
            //  images.splice(subscript, 1);
            //重新排序
            //   images.sort();
            //返回
            return ;
        }

第三个问题

onclick="javascript:delImage(this,'+index+')" 
传递这个index 参数 不能直接贴上,需要单引号加+号.


附载删除子节点

ps:JavaScript删除子节点的方法

HTML代码如下：


<div id="f"> 
 <div>a</div> 
 <div>b</div> 
 <div>c</div> 
</div>
如果想删除f节点下的所有子节点，很自然也很正常想到的方法应该就是下面的这段代码了：


var f = document.getElementById("f"); 
var childs = f.childNodes; 
for(var i = 0; i < childs.length; i++) { 
  alert(childs[i].nodeName); 
  f.removeChild(childs[i]); 
}
当程序运行后我们发现无论在FireFox还是在IE下，均不能完全的删除所有的子节点（FireFox中把空白区域也
当成节点，所以删除结点的结果会不一样的），这是因为当你把索引为0的子节点删除后那么很自然的原来索引
为1节点此时它的索引变成0了，而这时变量i已经变成1了，程序继续走时就会删除原先索引为２的现在为1的节点，这样程序运行的结果就是只删除了一半的子节点，用for in遍历结果也是一样的。想正常的删除全部节点
的话，我们应该从后面往前删除，代码如下：


for(var i = childs.length - 1; i >= 0; i--) { 
  alert(childs[i].nodeName); 
  f.removeChild(childs[i]); 
}
我们从索引最大值开始删除，采用递减的方法，这样索引便不会移动改变了。
https://www.jb51.net/article/77042.htm

 

 

 感觉layui 这个index 在上传完之后生成, 那就不叫before 了.应该在生成预览的时候一同把index 放出来, 然后在ajax 请求的时候可以把index 传到服务器, 这样方便在预览的时候删除,然后能直接通过index值删除数据库中荣誉值.....

现在只能是上传成功了,然后再更新下index到数据库..小伙伴们还有更好的方法,请留言.