码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-08-25 19:26:49      阅读:294      评论:0      收藏:0      [点我收藏+]

标签:

初始

技术分享

删除与添加

技术分享

 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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!