文件上传前端操作-增加文件与删除文件按钮(jquery实现)

初始

删除与添加

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <meta charset="utf-8">
 6     <script type="text/javascript" src="assets/js/jquery.js"></script>
 7 </head>
 8 <body>
 9 <form action="<?php $_SERVER[‘PHP_SELF‘] ?>" method="post" enctype="multipart/form-data">
10
11     <input type="hidden" name="countFile" value="3">
12   <ul id="prod_upload_image" style="list-style: none !important;">
13
14         <li style="width:100%;">
15             <input type="file" name="image_0" class="inputbox"><a style="margin-top:9px;width:100px;" href="javascript:;" onclick="deleteImageUpload(this);">Delete</a>
16         </li>
17
18         <li class="cloneObj" style="width:100%;display:none;">
19             <input type="file"  name="image_" class="inputbox"><a style="margin-top:9px;width:100px;" href="javascript:;" onclick="deleteImageUpload(this);">Delete</a>
20         </li>
21
22     </ul>
23     <input type="submit">
24 </form>
25 <input type="hidden" name="countFile" value="2" id="countFile">
26 <a href="javascript:;" onclick="addMorImageUpload()">Add image</a>
27 <script type="text/javascript">
28
29     function addMorImageUpload() {
30         var cont = jQuery(‘#prod_upload_image‘);
31         var cloneOb = jQuery(".cloneObj").eq(0).clone().css(‘display‘,‘‘);
32         cont.append(cloneOb);
33         var inputList =cont.children(‘li‘);
34         var countIndex;
35         jQuery(inputList).each(function(index){
36             jQuery(this).children(‘input‘).attr("name","image_"+index)
37             countIndex = index;
38         });
39         jQuery(‘#countFile‘).attr(‘value‘,countIndex);
40
41
42     }
43
44     function deleteImageUpload(btn) {
45         jQuery(btn).parent().remove();
46         var inputList = jQuery(‘#prod_upload_image‘).children(‘li‘);
47         var countIndex;
48         jQuery(inputList).each(function(index){
49             jQuery(this).children(‘input‘).attr("name","image_"+index)
50             countIndex = index;
51         });
52         jQuery(‘#countFile‘).attr(‘value‘,countIndex);
53
54
55     }
56
57 </script>
58 </body>
59 </html>

joomla 接收提交的文件

1 <?php
2
3         $countF= JRequest::getVar("countFile")+1;
4         $files = array();
5         for($i=0;$i<$countF;$i++){
6             $files[$i] = JRequest::getVar(‘image_‘.$i,‘‘,‘files‘);
7         }
8
9 ?>
时间: 2024-08-09 08:37:50

文件上传前端操作-增加文件与删除文件按钮(jquery实现)的相关文章

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

原文地址:http://www.stepday.com/topic/?459 作文一个ExtJs的入门汉子,学习起来的确是比较费劲的事情,不过如今在这样一个网络资源如此丰富的时代,依然不是那么难了的.基本上都是Copy过来加以部分改造即可实现自己想要的功能,加之如今的第三方开发者也大发慈悲地写出了API的帮助文档以及示例文档.关于ExtJs内的文件上传,将从以下几个方面进行展开讲解: 一.ExtJs文件上传版面的布局以及配置 因为ExtJs的文件上传组件filefield是基于form表单提交数

文件上传的操作

使用第三方utils做文件上传.                  public void fileupload(View v){         try{         EditText et_filepath = (EditText) findViewById(R.id.et_filepath);         //获取输入的文件地址         String filepath = et_filepath.getText().toString().trim();           

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

打开靶机 查看页面信息 尝试直接上传一句话木马 提示不允许上传 查看源码 发现仅允许上传.jpg,.png,.gif三种格式的文件 上传shell.jpg并使用burpsuite抓取数据包 添加完成后再次尝试上传 更改shell.jpg为shell.php 放包 查看文件信息 使用菜刀或蚁剑连接 查找flag 成功拿到flag 原文地址:https://www.cnblogs.com/anweilx/p/12523459.html

AJAX文件上传实践与分析,带HTML5文件上传API。

对于HTML5已经支持AJAX文件上传了,但如果需要兼容的话还是得用一点小技巧的,HTML5等等介绍,先来看看以前我们是怎么写的. 网上可能会有一些叫AJAX文件上传插件,但在AJAX2.0之前是不可能实现的,因为浏览器的原因,AJAX根本获取不了文件信息,当然这里并不是说就不能文件上传了,只是说在AJAX2.0之前所谓的AJAX文件上传都是假冒的,核心更本没有用AJAX,而是利用iframe实现的,下面我们来看看如何利用iframe实现页面无刷新上传文件. iframe无刷新上传文件版. ht

(转)Spring文件上传,包括一次选中多个文件

背景: http://www.cnblogs.com/lixuwu/p/8495275.html已经实现了单文件的上传和下载,多文件的上传是另一种情景,这里记录下来 实现过程 先说前台. 运行以后就是这样子的. 一个非常简单的表单页面, 两个文件上传按钮, 一个提交 其中单个文件上传, 即只能选择一个文件, 无法同时选择多个 相对的, 多个文件就是可以同时选择多个文件了 文件选择以后就是这个样子 前台设置 代码如下: 一个form, 文件上传就是一个<input>输入, 属性type=&quo

Excel文件上传,解析,下载(一 文件上传,使用MultipartFile来实现)

文件上传我使用的是jquery的一个插件"ajaxfileupload.js",使用方式详见下面的一种方式,使用file类型的input,同时需要给button绑定事件,这边使用的"ajaxfileupload.js"当中定义的ajax请求,到后台. <div id="fileupload"> <input type="file" id="file" name="file&quo

django中使用FastDFS分布式文件系统接口代码实现文件上传、下载、更新、删除

运维使用docker部署好之后FastDFS分布式文件系统之后,提供给我接口如下: fastdfs tracker 192.168.1.216 192.168.1.217 storage 192.168.1.216 192.168.1.217 我们只需要在配置文件中进行配置即可,然后利用客户端提供的接口通过简单的代码就可以将文件上传到分布式文件系统中 至于内部实现机制,可以参考我的另外一篇博客:分布式文件系统Fastdfs原理及部署 再次提醒在安装客户端可能会遇到各种不可控的因素,导致你上传失败

改变FileUpload文件上传控件的显示方式,选择文件后自动上传

一.Aspx页面: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FileUploadDemo.aspx.cs" Inherits="WebApplication1.FileUploadDemo" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu

dos编辑文件上传到unix系统多余^M删除方法

linux上的文件sz到window编辑后多出^M, 方法一: 1.grep -anR '^M' filename |wc -l2.crontab -e 或vim filename3.:set ff                                  //查看文件格式4.:set ff=unix                          //设置文件格式5.:wq!6.grep -anR '^M' filename |wc -l 方法二 sed -i "s/$(echo -