初始

删除与添加

 <!DOCTYPE html>

 <html>

 <head>

     <title></title>

     <meta charset="utf-8">

     <script type="text/javascript" src="assets/js/jquery.js"></script>

 </head>

 <body>

 <form action="<?php $_SERVER['PHP_SELF'] ?>" method="post" enctype="multipart/form-data">

     <input type="hidden" name="countFile" value="3">

   <ul id="prod_upload_image" style="list-style: none !important;">

         <li style="width:100%;">

             <input type="file" name="image_0" class="inputbox"><a style="margin-top:9px;width:100px;" href="javascript:;" onclick="deleteImageUpload(this);">Delete</a>

         </li>

         <li class="cloneObj" style="width:100%;display:none;">

             <input type="file"  name="image_" class="inputbox"><a style="margin-top:9px;width:100px;" href="javascript:;" onclick="deleteImageUpload(this);">Delete</a>

         </li>

     </ul>

     <input type="submit">

 </form>

 <input type="hidden" name="countFile" value="2" id="countFile">

 <a href="javascript:;" onclick="addMorImageUpload()">Add image</a>

 <script type="text/javascript">

     function addMorImageUpload() {

         var cont = jQuery('#prod_upload_image');

         var cloneOb = jQuery(".cloneObj").eq(0).clone().css('display','');

         cont.append(cloneOb);

         var inputList =cont.children('li');

         var countIndex;

         jQuery(inputList).each(function(index){

             jQuery(this).children('input').attr("name","image_"+index)

             countIndex = index;

         });

         jQuery('#countFile').attr('value',countIndex);

     }

     function deleteImageUpload(btn) {

         jQuery(btn).parent().remove();

         var inputList = jQuery('#prod_upload_image').children('li');

         var countIndex;

         jQuery(inputList).each(function(index){

             jQuery(this).children('input').attr("name","image_"+index)

             countIndex = index;

         });

         jQuery('#countFile').attr('value',countIndex);

     }

 </script>

 </body>

 </html>

joomla 接收提交的文件

 <?php

         $countF= JRequest::getVar("countFile")+1;

         $files = array();

         for($i=0;$i<$countF;$i++){

             $files[$i] = JRequest::getVar('image_'.$i,'','files');

         }

 ?>

文件上传前端操作-增加文件与删除文件按钮（jquery实现）的更多相关文章

  1. SpringBoot整合阿里云OSS文件上传、下载、查看、删除

    1. 开发前准备 1.1 前置知识 java基础以及SpringBoot简单基础知识即可. 1.2 环境参数 开发工具:IDEA 基础环境:Maven+JDK8 所用技术:SpringBoot.lom ...

  2. [转]ExtJs入门之filefield：文件上传的配置+结合Ajax完美实现文件上传的asp.net示例

    原文地址:http://www.stepday.com/topic/?459 作文一个ExtJs的入门汉子,学习起来的确是比较费劲的事情,不过如今在这样一个网络资源如此丰富的时代,依然不是那么难了的. ...

  3. PHP FTP操作类( 上传、拷贝、移动、删除文件/创建目录 )

    /** * 作用:FTP操作类( 拷贝.移动.删除文件/创建目录 ) * 时间:2006/5/9 * 作者:欣然随风 * QQ:276624915 */ class class_ftp { publi ...

  4. BootStrap FileInput 插件实现多文件上传前端功能

    <!DOCTYPE html> <html> <head> <title>文件上传</title> <meta charset=&qu ...

  5. ctfhub技能树—文件上传—前端验证

    打开靶机 查看页面信息 尝试直接上传一句话木马 提示不允许上传 查看源码 发现仅允许上传.jpg,.png,.gif三种格式的文件 上传shell.jpg并使用burpsuite抓取数据包 添加完成后 ...

  6. AJAX文件上传实践与分析，带HTML5文件上传API。

    对于HTML5已经支持AJAX文件上传了,但如果需要兼容的话还是得用一点小技巧的,HTML5等等介绍,先来看看以前我们是怎么写的. 网上可能会有一些叫AJAX文件上传插件,但在AJAX2.0之前是不可 ...

  7. （转）Spring文件上传,包括一次选中多个文件

    背景: http://www.cnblogs.com/lixuwu/p/8495275.html已经实现了单文件的上传和下载,多文件的上传是另一种情景,这里记录下来 实现过程 先说前台. 运行以后就是 ...

  8. 【Java EE 学习 22 上】【文件上传】【目录打散】【文件重命名】

    1.文件上传概述 (1)使用<input type="file">的方式来声明一个文件域. (2)表单提交方式一定要是post方式才行 (3)表单属性enctype 默 ...

  9. [原创]java WEB学习笔记49：文件上传基础，基于表单的文件上传,使用fileuoload 组件

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

随机推荐

  1. wppay免登录付费查看隐藏内容/付费资源下载

    WPPAY是一款模板兔开发的免登录的付费查看内容/付费下载资源WordPress插件,WPPAY不需要用户注册登录即可支付查看隐藏内容,把整个流程做到极简.发布文章时要隐藏的内容可以利用短代码: [w ...

  2. jsp指令介绍

    JSP指令(directive)是为JSP引擎而设计,它们并不直接产生任何可见输出,而只是告诉引擎如何处理JSP页面中的其余部分. 在JSP 2.0规范中定义了三个指令: 1.page指令 2.inc ...

  3. 仿QQ浏览器mac版官网主页 html+css3特效

    这是一款超酷的CSS3动态背景动画特效,CSS3仿QQ浏览器官网彗星动画背景特效. 在线演示本地下载

  4. （转）redux

    随着 JavaScript 单页应用开发日趋复杂,越来越多的 state (状态)需要在前端进行管理. 这些 state 可能包括服务器响应.缓存数据.本地生成尚未持久化到服务器的数据,也包括 UI ...

  5. 二分图的最大独立集 最大匹配解题 Hopcroft-Karp算法

    二分图模型中的最大独立集问题:在二分图G=(X,Y;E)中求取最小的顶点集V* ⊂ {X,Y},使得边 V*任意两点之间没有边相连. 公式: 最大独立集顶点个数 = 总的顶点数(|X|+|Y|)- 最 ...

  6. jquey中的事件绑定

    三种方法: $(selector).live(events, data, handler);                // jQuery 1.3+ $(document).delegate(se ...

  7. PHP中的字符串类型

    PHP支持两种类型的字符串,这些字符串用引号说明. 1.如果希望赋值一个字面意义的字符串,精确保存这个字符串的内容,应该用单引号标注,例如: $info='You are my $sunshine'; ...

  8. SqlServer动态变换库名

    declare @tname varchar(20),@num intset @tname='Players_Log_L10001'declare @sql Nvarchar(1000)=N'sele ...

  9. HDFS开发中的一些问题（逐步补充）

    1.windows操作系统下运行时报:Failed to locate the winutils binary in the hadoop binary path   java.io.IOExcept ...

  10. 将自己的类封装为lib的方法

    前言: Windows API中所有的函数都包含在dll中,其中有3个最重要的DLL. (1)   Kernel32.dll 它包含那些用于管理内存.进程和线程的函数,例如CreateThread函数 ...