初始

删除与添加

 <!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. luogu3366 【模板】 最小生成树 Prim

    题目大意 给出一个无向图,求出最小生成树,如果该图不连通,则输出orz. 概念 对于一个无向图,要求选出一些边,使得图上的每一个节点互相连通,且边权和最小.选出的边与节点形成的子图必然是颗树,这棵树叫 ...

  2. nexus启动报错----->错误 1067: 进程意外终止。

    1.今天启动nexus报错: 2.错误信息 错误 1067: 进程意外终止. 3.检查发现我之前把jdk升级了.然而nexus之前指定的jdk将不再生效. 4.解决办法 找到nexus安装目录 修改b ...

  3. 开源DDos 机器学习思路求解的一些源码——TODO 待分析

    一些源码:https://github.com/elbaulp/MafDet System that aims to detect and mitigate DDoS attacks using Ma ...

  4. [SPOJ 30669] Ada and Trip

    [题目链接] https://www.spoj.com/problems/ADATRIP/ [算法] 直接使用dijkstra堆优化算法即可 [代码] #include<bits/stdc++. ...

  5. 杂项-SpringEureka：笔记-1

    ylbtech-杂项-SpringEureka:笔记-1 1.返回顶部 1. THE SELF PRESERVATION MODE IS TURNED OFF.THIS MAY NOT PROTECT ...

  6. Solr.NET快速入门(九)【二进制文档上传】【完】

    二进制文档上传 SolrNet支持Solr"提取"功能(a.k.a. Solr"Cell")从二进制文档格式(如Word,PDF等)索引数据. 这里有一个简单的 ...

  7. 你必须知道的.net导航

    http://www.cnblogs.com/anytao/archive/2007/09/14/must_net_catalog.html

  8. MVC中使用UpdateModel获取接口参数

    废话少说,直接上代码: 模型类定义: public class RequestModel { public string Name { get; set; } public float Age { g ...

  9. Sybase 动态改变存储过程里查询的数据库

    declare @sql varchar(500) select @sql='select * from '+@dbName+'..tableName' --此句用于执行拼接好的SQL语句 exec( ...

  10. 12.javaweb SQL标签库

    一.说明及使用 1,  首先要知道,开发中绝对不会SQL标签库在JSP中进行数据库操作,学习SQL标签库只是作为一个只是扩展 2,  SQL标签库分类 2.1<sql:setDataSource ...