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)"/>