实现动态的文件上传操作按钮的添加和删除

最新推荐文章于 2020-10-14 18:27:43 发布
最新推荐文章于 2020-10-14 18:27:43 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： jquery 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shangdi1988/article/details/18188713
版权

javascript实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery文件上传</title>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script type="text/javascript">
        var addMore = function() {
                var div = document.getElementById("div2");
                var br = document.createElement("br");
                var input = document.createElement("input");
                var button = document.createElement("input");
                
                input.setAttribute("type", "file");
                button.setAttribute("type", "button");
                button.setAttribute("value", "Remove");
                
                button.onclick = function() {
                    div.removeChild(br);
                    div.removeChild(input);
                    div.removeChild(button);
                }
                
                div.appendChild(br);
                div.appendChild(input);
                div.appendChild(button);
            }
        //节点的移动
        //$(function(){
            
        //});
    </script>
</head>

<body>
    <div id="div1">
        <input type="file" id="upload"/>
          <input type="button" id="btn" value="more" οnclick="addMore();"/>
    </div>
    <div id="div2"></div>
</body>

</html>

jquery实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery文件上传</title>
<title>jquery1</title>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script type="text/javascript">
    /**    var addMore = function() {
                var div = document.getElementById("div2");
                var br = document.createElement("br");
                var input = document.createElement("input");
                var button = document.createElement("input");
                
                input.setAttribute("type", "file");
                button.setAttribute("type", "button");
                button.setAttribute("value", "Remove");
                
                button.onclick = function() {
                    div.removeChild(br);
                    div.removeChild(input);
                    div.removeChild(button);
                }
                
                div.appendChild(br);
                div.appendChild(input);
                div.appendChild(button);
            }**/
        //jquery实现文件上传的按钮添加和删除
        $(function(){
            $("input[type=button]").click(function(){
                var br = $("<br>");
                var input = $("<input type='file'/>");
                var button = $("<input type='button' value='Remove'/>");
                $("#div1").append(br).append(input).append(button);
                
                button.click(function() {
                    br.remove();
                    input.remove();
                    button.remove();
                });
            });
        });
    </script>
</head>

<body>
    <div id="div1">
        <input type="file" id="upload"/>
          <input type="button" id="btn" value="more" οnclick="addMore();"/>
    </div>
    <div id="div2"></div>
</body>
</html>


jquery实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery文件上传</title>
<title>jquery1</title>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script type="text/javascript">
    /**    var addMore = function() {
                var div = document.getElementById("div2");
                var br = document.createElement("br");
                var input = document.createElement("input");
                var button = document.createElement("input");
                
                input.setAttribute("type", "file");
                button.setAttribute("type", "button");
                button.setAttribute("value", "Remove");
                
                button.onclick = function() {
                    div.removeChild(br);
                    div.removeChild(input);
                    div.removeChild(button);
                }
                
                div.appendChild(br);
                div.appendChild(input);
                div.appendChild(button);
            }**/
        //节点的移动
        var count = 0;
        $(function(){
            $("input[type=button]").click(function(){
                var br = $("<br>");
                var input = $("<input type='file'/>");
                var button = $("<input type='button' value='Remove" + (++count) + "'/>");
    
                $("#div2").append(br).append(input).append(button);
                button.click(function(){
                    br.remove();
                    input.remove();
                    button.remove();
                });
            });
        });
    </script>
</head>

<body>
    <div id="div1">
        <input type="file" id="upload"/>
          <input type="button" id="btn" value="more"/>
    </div>
    <div id="div2"></div>
</body>
</html>





wsxlgg
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
表单附件上传与删除思路梳理（含前台代码）
u014320392的博客
05-24 3992
      附件上传是进行表单操作时经常会用到的功能，下面详细介绍前台和后台文件上传代码的思路，并附最新代码。      首先在前台我们使用的是jQuery的File Upload组件，该组件以jquery的ajax为基础，支持多文件的上传、取消和删除，在使用该组件前，需要引入以下文件：&lt;script type="text/javascript" src="/${res}/js/jquery...
点击button按钮，实现文件上传
chouzongdai7030的博客
01-14 6177
<input type="file">设置input的透明度为0，然后定义其所在div的样式 <!DOCTYPE html> <html> <head> <style> .fileInputCo...
文件上传前端操作-增加文件与删除文件按钮（jquery实现）
weixin_30906185的博客
08-25 587
初始 删除与添加 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <meta charset="utf-8"> 6 <script type="text/javascript" src="asse...
js jquery分别实现动态的文件上传操作按钮的添加和删除
01-21
javascript实现 代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>jquery文件上传</title> <script typ
js弹出窗口实现动态文件上传
空-城旧-梦 的专栏
04-15 605
function showWin(title,html,width,height,modal,type,url)   {       //设置窗口大小       if(width         {               width=400;           }       if(height         {               height=200;  
js实现动态添加上传文件页面
12-02
此功能为：初始时刻只有一个添加按钮，当点击添加文件时，会增加一个选择文件和删除区域，同时显示上传按钮，当点击删除，此行选择文件行消失，当所有选择文件项都消失时，上传按钮将被隐藏起来。下面是实例代码： ...
js实现上传文件添加和删除文件选择框
11-29
本文这里给大家说个用javascript实现的很实用的功能，是在上传附件的时候，可以动态地添加和删除文件选择框，然后一次性上传。 从理论上看，实现起来比较容易，但实际工作的时候还是遇到两个难点，这些难点归结起来...
uploadify大文件多文件上传在asp.net的使用,修改删除的bug和覆盖bug包括IIS配置
08-08
就是你选择a,b,c文件上传，然后点击删除按钮进行删除，删除后再上传a,b,c它就会提示你说是否要替换文件。按道理来说根本就不需要这样的 好了，下面来做js文件的修改吧，还是修改jquery.uploadify.min.js
点击增加input
别在熬夜了！
07-11 1411
script function add1(){     var input1 = document.createElement('input');     input1.setAttribute('type', 'file');     input1.setAttribute('name', 'file[]');     var input2 = document.createE
使用按钮(button)实现文件上传
AKALXH的博客
10-14 1万+
使用按钮来实现文件上传的功能 今天写项目,实现一个图片上传功能,为了美观点就不想使用 它, 因为真滴丑~ .然后就使用一个按钮来实现一个文件上传,既美观又实用,在此分享给大家. => html中代码 <button class="btn btn-theme" onclick="upload.click()"> <input type="file" name="upload" id="upload" style="display: none;" /> 第一个是普通按钮给
通过button控制input控件上传文件
消失的终点线的专栏
10-21 810
出于安全方面的考虑，通过JS修改input-file的value是无法正确上传文件的。 只有当鼠标真正单击在上传控件的浏览按钮所添加的文件才可以上传。
文件上传页面控制动态添加删除的代码
生活在爪洼岛上
03-24 174
&lt;%@ page language="java" pageEncoding="UTF-8"%&gt; &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/ti
添加附件的应用<file>
yangxin_blog的专栏
10-24 1843
在邮件中我们经常用到添加附件，现在简单的应用下： 效果图： 实现原理： 采用table标签的，主要思想：采用table标签方式 1,点击文字之后，就自动创建（原先是自己/创建，现在拿到table对象之后，可以insertRow() insertCell()）创建行和列 2，删除的时候通过父节点来移除 核心代码： function creatMail(){ var tab=d
element-ui el-upload组件，上传完成后隐藏上传按钮，删除后又显示
weixin_42418774的博客
07-01 9626
项目开发中要求最多只能上传3张图片，最后一张图片上传完成后隐藏上传按钮，解决方法如下： 代码示例： <el-upload :class="{uoloadSty:showBtnImg,disUoloadSty:noneBtnImg}" //设置隐藏显示的style :action="dealImgUrl" //地址 list-type="picture-card" :on-preview="handleImgPreview" //点击图片放大 :on-remove="handleI...
一个按钮完成前台上传文件操作
热门推荐
Mr Mirror的博客
08-21 1万+
我们都知道，前台选择文件，只能通过input的file类型的文件选择框操作。但有时却为了界面的美观，要求用按钮来完成。 第一步、隐藏文件选择框 第二步、设置按钮事件onclick，触发文件选择框事件           第三步、选择文件后自动上传，触发文件选择时事件onchange 第四步，使用插件上传，插件有很多，大家可以网上找，我这边用的是jquery.form.js插件（ht
动态的添加文件上传框，并实现遍历和删除功能
最新发布
05-26
可以使用 HTML、JavaScript 和 jQuery 实现动态添加文件上传框，并实现遍历和删除功能。 首先，在 HTML 页面中创建一个上传文件的表单，包含一个添加按钮和一个容器用于显示上传文件框： ```html []" class=...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wsxlgg

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值