`
hoary20
  • 浏览: 137986 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

动态创建和删除文件输入框

阅读更多
摸索了2个星期的玩意。
<script language="javascript">
 var num =2;
 var reg = /\d+/;
 function buildFileInput(){
  filediv = document.createElement("div");
  filediv.id = "div_"+num;
  var str = filediv.id;
  labeltext = document.createTextNode("附件"+num+":");
  fileinput = document.createElement("input");
  fileinput.type = "file";
  fileinput.name = "contractfile";
  fileinput.id = "contractfile";
  fileinput.size="25";
  btn = document.createElement("input");
  btn.type = "button";
  btn.value = "删除";
  btn.onclick= function(){remove(reg.exec(str));};
  
  filediv.appendChild(labeltext);
  filediv.appendChild(fileinput);
  filediv.appendChild(btn);

  document.all.filesinput.appendChild(filediv);
  num++;
 }
 //初始化文件输入框列表
 buildFileInput();
 function remove(o){
  document.getElementById("filesinput").removeChild(document.getElementById("div_"+o));
 }
  </script> 

页面上原有的输入框
<input type="file" name="importContract" id="importContract" style="font-size:13px;" size="25" />
     <button onclick="buildFileInput()" style="font-size:13px;height:20px;">添&nbsp;加</button>
     <div id="filesinput"></div>
分享到:
评论

相关推荐

    jquery创建和删除多个同名的input输入框

    这个文件很可能包含了上述示例的完整代码或者其他相关的jQuery函数,用于处理input输入框的创建和删除。在实际项目中,将这些功能封装到独立的JS文件中可以提高代码的可维护性和重用性。 总的来说,通过jQuery,...

    jQuery动态添加删除编辑标签代码.zip

    通过jQuery,开发者可以轻松实现动态创建、删除和编辑这些标签,提高用户体验。 1. **动态添加选项卡**:这个功能允许用户在运行时创建新的选项卡。这通常涉及监听某个按钮的点击事件,然后在DOM(文档对象模型)中...

    一个用于创建标签输入框的jQuery插件

    这个插件的标题表明它是“一个用于创建标签输入框的jQuery插件”,并且它特别强调了与Twitter Typeahead.js和Twitter Bootstrap的兼容性,这意味着我们可以利用这两个流行的库来增强其功能和视觉效果。 **jQuery...

    复选框点击添加或删除text输入框value值.zip

    "复选框点击添加或删除text输入框value值.zip"这个压缩包文件提供了一个具体的示例,涉及到JavaScript(JS)编程中的事件处理、DOM操作以及数据绑定等知识点。下面我们将深入探讨这些技术。 首先,复选框(Checkbox...

    tag-it.js基于jQuery输入框创建文字标签插件

    1. **动态创建标签**:用户在输入框内输入文字,按下空格键后,文字会自动转化为一个独立的标签。 2. **自定义样式**:`tag-it.js` 允许开发者通过 CSS 自定义标签的外观,包括颜色、大小、边框等。 3. **可编辑与...

    输入框回车生成标签的demo

    6. **事件监听**:除了回车事件,还有其他一些重要的事件需要监听,例如点击删除按钮时的`click`事件,清空输入框时的`blur`事件,以及可能的数据验证和错误处理事件。这些事件可以用来执行相应的业务逻辑,如更新...

    Vue实现动态创建和删除数据的方法

    Vue 实现动态创建和删除数据的方法 本文将为大家分享一个使用 Vue 实现动态创建和删除数据的方法,该方法具有很好的参考价值,希望对大家有所帮助。 Vue 中的动态创建和删除数据 在 Vue 中,实现动态创建和删除...

    模仿QQ、微信表情输入框

    2. **UI设计**:设计一个输入框界面,包括一个普通的文本输入框和一个表情面板。表情面板可以是一个可滑动的视图,展示预设的表情分类,如“基本表情”、“动物”、“美食”等。每个表情图标点击后,应将对应的图片...

    bootstrap4标签输入框插件

    Bootstrap 4标签输入框插件是一款为网页设计者和开发者提供的高效工具,它利用了Bootstrap 4框架的强大功能,特别是其Badge组件,来实现动态创建、编辑和删除标签的功能。这款插件对于需要用户输入多标签场景的应用...

    仿126邮箱多文件上传

    1. **JavaScript**:用于动态创建文件输入框以及处理上传逻辑。 2. **HTML**:构建页面结构。 3. **CSS**:设置样式,使界面更加美观。 #### 三、核心代码解析 1. **HTML结构**:通过`&lt;html&gt;`、`&lt;head&gt;`、`&lt;body&gt;`...

    textbox输入框自动提示功能

    在IT领域,"textbox输入框自动提示功能"是一种常见的用户界面设计...通过分析和理解这些文件,我们可以深入学习到如何使用C#和.NET Framework来创建具备自动提示功能的文本输入框,以及如何在实际项目中应用这些技术。

    jQuery输入框创建关键词标签代码

    首先,我们需要一个HTML结构来构建输入框和显示标签的区域。`index.html`文件应该包含以下基本元素: ```html &lt;!DOCTYPE html&gt; &lt;title&gt;jQuery输入框创建关键词标签 ...

    recycleView中实现item动态添加、删除以及item中嵌套editTex

    通过适配器和ViewHolder,我们可以轻松地实现item的动态添加和删除。同时,结合EditText,我们可以在item内部提供用户输入功能,但需要注意数据的保存、恢复和验证,确保良好的用户体验。在实际开发中,可能还需要...

    tag-it.js输入框创建标签代码.zip

    `tag-it.js`是一款强大而灵活的jQuery插件,能帮助开发者快速实现输入框创建标签的功能,同时提供了丰富的定制选项和事件处理机制。通过理解和应用这个插件,你可以在网站上创建更直观、更具互动性的标签系统,提升...

    jQuery输入框创建标签代码.zip

    在这个“jQuery输入框创建标签代码.zip”压缩包中,包含了一个功能是利用jQuery实现用户在输入框中输入文字,通过空格键创建可删除的标签。这个功能在很多网站的用户输入场景中很常见,比如博客标签、社交媒体话题...

    仿QQ登录框-隐藏输入框句柄

    与静态创建不同,动态创建可以在程序执行过程中灵活地添加、删除或修改控件,例如登录框。这种做法可以提高程序的灵活性,并在必要时提高安全性。 2. **句柄(Handle)**:在Windows操作系统中,句柄是一个唯一的...

    jQuery输入框提示绑定车牌代码.zip

    这通常通过设置输入框的`maxLength`属性来完成,或者在每次输入时进行验证并删除超出长度的字符。 接下来,我们来看一下实际的代码实现。在这个项目中,可能包含一个HTML文件用于布局和元素定义,一个CSS文件用于...

    edittext自定义密码输入框

    在某些场景下,为了保护用户的隐私,我们通常需要创建一个自定义的密码输入框,使得用户输入的字符以特定的字符(如星号*或下划线_)显示,同时保持基本的输入和删除功能。本教程将详细讲解如何实现标题所提及的...

    vc获取网页中输入的密码框中的内容和文本输入框的内容.zip

    2. **HTML DOM (Document Object Model)**:DOM是HTML和XML文档的结构化表示,允许程序和脚本动态更新、添加、删除和改变元素。在VC++中,可以通过WebBrowser控件的`Document`属性获取到当前加载页面的`...

Global site tag (gtag.js) - Google Analytics