文件上传前端操作-增加文件与删除文件按钮（jquery实现）

初始

删除与添加

 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 ?>

 

posted @ 2015-08-25 17:24  lokou  阅读(5110)  评论(0)  编辑  收藏  举报