jQuery动态添加 input type=file的实现代码

代码如下:

<form id="fileForm" action="" method="post" enctype="multipart/form-data">
<tr>
<td>
<input type="file" name="file"><input type="button" id="addButon" value="Add" onclick="add()">
</td>
</tr>
</form>

核心jquery代码


代码如下:

//添加一行<tr>
function add() {
var content = "<tr><td>";
content += "<input type='file' name='file'><input type='button' value='Remove' onclick='remove(this)'>";
content += "</td></tr>"
$("#fileForm").append(content);
}
//删除当前行<tr>
function remove(obj) {
$(obj).parent().parent().remove();
}

我们整理的在线演示：http://demo.jb51.net/jquery/juqery_input/

赞 (0)

相关推荐

  • jQuery动态添加<input type=

    jQuery动态添加<input type="file">

    有时候需要在页面上允许用户上传多个文件,个数由用户自己决定,个数多了也可以删除,使用jQuery可以很简单的实现这个功能. 先给大家展示下效果图: <!DOCTYPE html> <html> <head> <title>test.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> &l

  • jQuery操作 input type=checkbox的实现代码

    复制代码 代码如下: <input type="checkbox">: 2012欧洲杯"死亡之组"小组出线的国家队是:<br> <input type="checkbox" name="nation" value="Germany">德国 <input type="checkbox" name="nation" value=&

  • jquery获取input type=text中的值的各种方式(总结)

     实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JQuery获取文本框的值</title> <meta h

  • jQuery操作input type=radio的实现代码

    <input type="radio">如下: 复制代码 代码如下: <input type="radio" name="city" value="BeiJing">北京 <input type="radio" name="city" value="TianJin">天津 <input type="radio&quo

  • jquery对所有input type=text的控件赋值实现方法

    如下所示: function resetData() { $("input[type=text]").each( function() { $(this).attr("value",""); } ); } 以上这篇jquery对所有input type=text的控件赋值实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • jQuery通过改变input的type属性实现密码显示隐藏切换功能

    一般我们做登录注册的时候都会提供一个让用户选择自己输入的密码是否显示的需求, 这种需求我们肯定会想到只要动态改变input的type属性不就好了(text显示/password隐藏): 于是我用了$(''#id).attr('type', 'password')这个API 然而结果并不是我想的那样,出错了 HTML 代码 Uncaught Error: type property can't be changed 意思大概就是这个属性不能被修改. 于是我就googl一手. 然而我得到的结果是这样

  • jQuery动态添加 input type=file的实现代码

    复制代码 代码如下: <form id="fileForm" action="" method="post" enctype="multipart/form-data"> <tr> <td> <input type="file" name="file"><input type="button" id="a

  • jQuery动态添加与删除tr行实例代码

    jQuery动态添加与删除tr行实例代码

    这篇文章给大家分享的是一个用Jquery实现动态添加和删除tr行的小例子 下面是实现的样子,当然没有样式: 点击添加按钮可以添加一行: 点击删除可以删除本行: 基本功能是这样,下面是代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- 这里是引用了一个百度的jquery库,可换为本地jquery

  • jQuery动态添加的元素绑定事件处理函数代码

    我当时的处理方法是在添加的时候手工绑定事件处理函数.不过新版的jquery已经添加了这个功能.我们已经不需要为此烦恼了. 参考:http://api.jquery.com/live/ 以前我们定义事件,比如为元素定义单击事件是这样写的: 复制代码 代码如下: $('input').click(function () { //处理代码 }); 或 复制代码 代码如下: $('.clickme').bind('click', function() { // Bound handler called.

  • jQuery实现input[type=file]多图预览上传删除等功能

    下面我们了解一下,多图上传时,怎么实现预览.上传.删除等功能.下图是功能实现的预览效果,虽然样式有点丑,不过功能还是实现了.话不多说,直接看代码会更直观一些. 首先定义一下基本格式,样式代码自行脑补: <body> <div class="upload-header"> <input id="upload" type="file" accept="image/*" multiple="m

  • jQuery动态添加及删除表单上传元素的方法(附demo源码下载)

    jQuery动态添加及删除表单上传元素的方法(附demo源码下载)

    本文实例讲述了jQuery动态添加及删除表单上传元素的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示效果. 具体代码如下: <html> <head> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(d

  • jquery动态添加带有样式的HTML标签元素方法

    如下所示: <table class="exhibit_table" style="font-size:13px; text-align:left;"> <tr> <td style="width:80px;" align="right">上传计划单</td> <td style="padding:10px;"><input type=&qu

  • jQuery动态添加可拖动元素完整实例(附demo源码下载)

    jQuery动态添加可拖动元素完整实例(附demo源码下载)

    本文实例讲述了jQuery动态添加可拖动元素的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: index.html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type&

  • jquery动态添加删除div 具体实现

    复制代码 代码如下: <script type="text/javascript" src="jquery.js"></script><body><form action="" method="post" enctype="multipart/form-data"><label>请选择上传的图片</label><a href=&q

  • Jquery动态添加及删除页面节点元素示例代码

    通常我们会遇到选中某个条件,然后添加,累计多个后,再进行执行. 废话不多说,直接上代码! 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Jquery动态添加及删除页面节点</title> <script src="http://code.jquery.com/jquery-1.8.3.min.js&quo

随机推荐