記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到數據庫..小伙伴們還有更好的方法,請留言.