初始

删除与添加

 <!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. 第一次Java作业——简单的登录界面

    千里之行,始于足下,从小做起,一点一滴学编程. import javax.swing.*; import java.awt.*; public class Homework{ public stati ...

  2. Tomcat启动时项目反复载入，导致资源初始化两次的问题

    近期在项目开发測试的时候,发现Tomcat启动时项目反复载入,导致资源初始化两次的问题  导致该问题的解决办法: 例如以下图:在Eclipse中将Server Locations设置为"Us ...

  3. JS轮播图动态渲染四种方法

    一. 获取轮播图数据  ajax 二.根据数据动态渲染 (根据当前设备 屏幕宽度判断) 1. 准备数据 2. 把数据转换成html格式的字符串 动态创建元素 字符串拼接 模板引擎 框架方法 2.把字符 ...

  4. python程序中用类变量代替global 定义全局变量

    在python编程中,一般使用global 关键字来定义全局变量,但是发现 global 关键字在涉及多个文件时,好像存在问题. 比如,单个文件下用global定义使用全局变量的情况 ,看下面的代码 ...

  5. 09-JavaScript高级

    今日知识 1. Dom(文档对象模型) 2. Bom(浏览器对象模型) 3. 总结 Dom 1. 获取id为div1的元素对象. * var result=document.getElementByI ...

  6. awk杂集-20170911

    awk 格式 1.awk -F '分割符' 'BEGIN{} /执行条件/{} END{}' filepath; 默认使用空格分割 2.awk -v word=$command '{print wor ...

  7. ShowDialog函数与Form的Activated函数同时使用的陷阱

    当我们需要在form启动之时,焦点显示在特定的控件“btn”上,我们可以先将btn的TabIndex设为0,然后要确保它visible=true,最后在Form的Activated事件方法中btn.G ...

  8. SSRS 报表 如何加参数

    SSRS 报表 如何加参数 连接上以后出现一个问题 就是给报表加上参数以后报表不断刷新,跟上次那个报表刷新是同样的问题.那么下面我们来解决一下. 1. 这是给报表添加默认参数进入页面后就不断的刷新刷新 ...

  9. sublime3 install python3

    链接地址:https://blog.csdn.net/Ti__iT/article/details/78830040

  10. 7) 十分钟学会android--Activity的生命周期之暂停与恢复

    在正常使用app时,前端的activity有时会被其他可见的组件阻塞(obstructed),从而导致当前的activity进入Pause状态.例如,当打开一个半透明的activity时(例如以对话框 ...