動態添加、刪除上傳域（可限制添加條數）
阿新 • • 發佈：2018-10-29
device child clas scale this DDM doc tex puts
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script> 9 <title>動態追加上傳區，並可控制添加的數量</title> 10 </head> 11 12 <body> 13 <div class="addItems"> 14 <label for="">上傳：</label> 15 <div id="InputsWrapper"> 16 <div style="width:100%;height:auto"> 17 <input type="file" class="thumPath" name="imagesFile" id="field_1" value="Text 1" /> 18 <input type="button" id="AddMoreFileBox" value="添加" style="width:40px;height:30px;" /> 19 <input type="file" class="landformFile" style="display:none" name="landformFile" id="field_1" value="Text 1" /> 20 <div style="clear:both"></div> 21 </div> 22 </div> 23 </div> 24 <script> 25 //追加input上傳 26 $(document).ready(function () { 27 var MaxInputs = 5; //最多可以添加幾個 28 var InputsWrapper = $("#InputsWrapper"); //添加的input輸入框 的大div id 29 var AddButton = $("#AddMoreFileBox"); //Add button ID 30 var x = InputsWrapper.length; //initlal text box count 31 var FieldCount = 1; //to keep track of text box added 32 //點擊添加按鈕後執行添加上傳表單相關信息 33 $(AddButton).click(function (e) { 34 //允許的input 35 if (x <= MaxInputs) { 36 FieldCount++; //text box added increment 37 //add input box 38 $(this).empty(); 39 $(InputsWrapper).append( 40 ‘<div style="width:100%;height:auto;margin:5px 0 5px 0;"><input type="file" name="imagesFile" id="field_‘ + 41 FieldCount + ‘" value="Text ‘ + FieldCount + 42 ‘"/><a href="#" class="removeclass"><input type="button" style="width:40px;height:30px" value="刪除" ></a><div style="clear:both"></div></div>‘ 43 ); 44 x++; //text box increment 45 } 46 return false; 47 }); 48 $(".addItems").on("click", ".removeclass", function (e) { //user click on remove text 49 if (x > 1) { 50 $(this).parent(‘div‘).remove(); //remove text box 51 x--; //decrement textbox 52 } 53 return false; 54 }) 55 }); 56 </script> 57 </body> 58 59 </html>
效果圖如下：
僅追加，無限制數目，無刪除例子如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>僅追加，無限制數目，無刪除</title> 8 </head> 9 <body> 10 <input type="file" id="pic_add"/> 11 <button id="add_pics">添加</button> 12 <script type="text/javascript"> 13 var add_pics = document.getElementById(‘add_pics‘); //獲取button的id 14 //var pic_add = document.getElementById("pic_add"); //獲取input的id 15 add_pics.onclick = function(){ //為btn綁定點擊事件 16 var newTxt = document.createElement(‘input‘); //創建一個input元素 17 newTxt.setAttribute("type","file"); //為該元素設置屬性值 18 document.body.appendChild(newTxt); //將創建的input這個節點追加到body後面 19 newTxt.style.display = "block"; //給input設置block屬性 20 newTxt.style.marginTop = "20px"; //marginTop距離上一個輸入框的距離 21 } 22 </script> 23 </body> 24 </html>
動態添加、刪除上傳域（可限制添加條數）