初始

删除与添加

 <!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. vmware mac 分辨率设置

    1.安装vmware tool 2.关闭虚拟机,在设置中找到显示器项 3.选中“加速3D图形” 4.在监视器中,选中 指定监视器设置,使用任意分辨率 5.如果没有可用分辨率,手动输入,例如 1680* ...

  2. bzoj2958: 序列染色(DP)

    2958: 序列染色 题目:传送门 题解: 大难题啊(还是我太菜了) %一发大佬QTT 代码: #include<cstdio> #include<cstring> #incl ...

  3. [NOIP 2007] 树网的核

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1999 [算法] 树的直径 + 单调队列 [代码] #include<bits/ ...

  4. express 4.2.0 使用session和cookies

    express 4.2.0 使用session和cookies https://my.oschina.net/u/1466553/blog/294336

  5. [JavaEE] Spring学习资源链接

    学习规划 http://forrest-lv.iteye.com/blog/1166947 SpringMVC - 框架配置 http://blog.csdn.net/ljhabc1982/artic ...

  6. 修改python的pip下载源

    推荐两个源: 豆瓣:http://pypi.douban.com/simple/ 清华:https://pypi.tuna.tsinghua.edu.cn/simple 使用方法有两种,一种为临时使用 ...

  7. Bootstrap 模态框使用

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. 多个tomcat配置,解决冲突问题

    一.一般修改 路径: /opt/apache-tomcat/conf/server.xml 1.第一个tomcat使用默认配置 2.第二个tomcat一般配置 二.特殊修改 1.第二个tomcat特殊 ...

  9. [lua]异步串行流程*协程

    local function param_pack( params, callback ) table.insert(params, callback) return params end local ...

  10. junit使用第一弹

    知识点——断言 断言是编写测试用例的核心实现方式,即期望值是多少,测试的结果是多少,以此来判断测试是否通过. 1. 断言核心方法 assertArrayEquals(expecteds, actual ...