标签:
初始
删除与添加
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <meta charset="utf-8"> 6 <script type="text/javascript" src="assets/js/jquery.js"></script> 7 </head> 8 <body> 9 <form action="<?php $_SERVER[‘PHP_SELF‘] ?>" method="post" enctype="multipart/form-data"> 10 11 <input type="hidden" name="countFile" value="3"> 12 <ul id="prod_upload_image" style="list-style: none !important;"> 13 14 <li style="width:100%;"> 15 <input type="file" name="image_0" class="inputbox"><a style="margin-top:9px;width:100px;" href="javascript:;" onclick="deleteImageUpload(this);">Delete</a> 16 </li> 17 18 <li class="cloneObj" style="width:100%;display:none;"> 19 <input type="file" name="image_" class="inputbox"><a style="margin-top:9px;width:100px;" href="javascript:;" onclick="deleteImageUpload(this);">Delete</a> 20 </li> 21 22 </ul> 23 <input type="submit"> 24 </form> 25 <input type="hidden" name="countFile" value="2" id="countFile"> 26 <a href="javascript:;" onclick="addMorImageUpload()">Add image</a> 27 <script type="text/javascript"> 28 29 function addMorImageUpload() { 30 var cont = jQuery(‘#prod_upload_image‘); 31 var cloneOb = jQuery(".cloneObj").eq(0).clone().css(‘display‘,‘‘); 32 cont.append(cloneOb); 33 var inputList =cont.children(‘li‘); 34 var countIndex; 35 jQuery(inputList).each(function(index){ 36 jQuery(this).children(‘input‘).attr("name","image_"+index) 37 countIndex = index; 38 }); 39 jQuery(‘#countFile‘).attr(‘value‘,countIndex); 40 41 42 } 43 44 function deleteImageUpload(btn) { 45 jQuery(btn).parent().remove(); 46 var inputList = jQuery(‘#prod_upload_image‘).children(‘li‘); 47 var countIndex; 48 jQuery(inputList).each(function(index){ 49 jQuery(this).children(‘input‘).attr("name","image_"+index) 50 countIndex = index; 51 }); 52 jQuery(‘#countFile‘).attr(‘value‘,countIndex); 53 54 55 } 56 57 </script> 58 </body> 59 </html>
joomla 接收提交的文件
1 <?php 2 3 $countF= JRequest::getVar("countFile")+1; 4 $files = array(); 5 for($i=0;$i<$countF;$i++){ 6 $files[$i] = JRequest::getVar(‘image_‘.$i,‘‘,‘files‘); 7 } 8 9 ?>
文件上传前端操作-增加文件与删除文件按钮(jquery实现)
标签:
原文地址:http://www.cnblogs.com/liangsongbai/p/4758073.html