jquery 添加和删除节点

// 增加一个三和一节点
function addPanel() {
  // var newPanel = $('.my-panel').clone(true)
  var newPanel = $(".triple-panel-container>.my-panel").eq(0).clone(true)
  $(".triple-panel-container").append(newPanel)
}

// 删除一个三合一节点
function deletePanel() {
  let num = $('.triple-panel-container').children('.my-panel').length;
  if(num > 1)
    var last = $(".triple-panel-container>.my-panel").eq(-1).remove()
}

// 上传图片并生产缩略图
function makeTinyPic(obj) {
  console.log('get in...')
    var newsrc=getObjectURL(obj.files[0]);
    document.getElementById('tinyPic').src=newsrc;
}

//建立一個可存取到該file的url
function getObjectURL(file) {
    var url = null ;
    // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
    if (window.createObjectURL!=undefined) { // basic
        url = window.createObjectURL(file) ;
    } else if (window.URL!=undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file) ;
    } else if (window.webkitURL!=undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file) ;
    }
    return url ;
}

　

增加、删除子节点

     <!-- 新增添加和删除节点按钮 -->
      <div class="triple-panel-container">
        <div class="panel panel-primary my-panel">
           xxx
        </div><!-- end of panel -->
      </div><!-- end of triple-panel -->    

 

图片预览

<img id="tinyPic" width="60" height="60" src="">
<input type="file" required="required" onchange="makeTinyPic(this)"/>

 

转载于:https://www.cnblogs.com/longxia777/p/9145940.html