初始

删除与添加

 <!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. UVA11234 Expressions

    题目的意思实在是读不懂,又是把栈变成队列什么的.. 只是大体的意思就是把后缀表达式变一下.. 抛开意思,事实上就是依据输入建个树,然后倒序输出.. 拿第一个例子说明:大写代表操作符(+ - × /之类 ...

  2. oc21--super

    // // Phone.h #import <Foundation/Foundation.h> typedef enum { kFlahlightStatusOpen, kFlahligh ...

  3. 【SDOI 2010】 古代猪文

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1951 [算法] 欧拉定理+中国剩余定理 + lucas定理 [代码] #includ ...

  4. B1260 [CQOI2007]涂色paint 区间dp

    这个题和我一开始想的区别不是很大,但是要我独自做出来还是有一些难度. 每一次涂色 只有这两种可能: 1) 把一段未被 覆盖过的区间 涂成 * 色 2) 把一段被一种颜色覆盖的区间涂成 * 色 (并且 ...

  5. Java 系列之spring学习--依赖注入（二）

    一.依赖注入的三种方式 接口注入,set注入,构造函数注入 二.构造函数注入 2.1.测试类 package test; public class test01 { public String msg ...

  6. week2 notebook2

    Beginning day2: 1.基础数据类型宏观: 1.1.整型:int:1,2,3 1.2.字符串:str:‘anthony’ 1.2.1: 索引:索引即下标,就是字符串组成的元素从第一个开始, ...

  7. Tomcatsession共享方案--memcached-session-manager

    https://github.com/magro/memcached-session-manager/wiki/SerializationStrategies     MSM的特性:    a.支持t ...

  8. ubuntu安装-Caffe依赖

    参考链接:http://my.oschina.net/u/939893/blog/163921 1. 安装numpy相对简单,以下命令可以完成 apt-get install python-numpy ...

  9. Qt5.2 for Android 配置及部署到手机运行

    使用DNK编程也没有那么难,使用QT为安卓跨平台编程需要安装NDK,SDK通过NDK调用C++程序,偶尔能提高一些效率. SDK下载地址:http://developer.android.com/sd ...

  10. .bat 打开程序

    为什么要用.bat打开程序. 因为一个一个难得点 怎么做 百度的,start 程序路径\程序 改进 点击bat,不显示dos窗口. 新建.vbs文件 Set shell = Wscript.creat ...