`
jackroomage
  • 浏览: 1198122 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类

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

 
阅读更多

有时候需要在页面上允许用户上传多个文件,个数由用户自己决定,个数多了也可以删除,使用jQuery可以很简单的实现这个功能。

 

 

<!DOCTYPE html>
<html>
  <head>
    <title>test.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery-1.6.4.min.js"></script>
    <script type="text/javascript">
       
        //添加一行<tr>
        function add() {
            var content = "<tr><td>";
            content += "<input type='file' name='file'><input type='button' value='Remove' onclick='remove(this)'>";
            content +="</td></tr>"
            $("#fileTable").append(content);
        }
       
        //删除当前行<tr>
        function remove(obj) {
            $(obj).parent().parent().remove();
        }
     </script>
  </head>
  <body>
   <form id="fileForm" action="" method="post" enctype="multipart/form-data">
        <table id="fileTable">
            <tr>
                <td>
                    <input type="file" name="file"><input type="button" id="addButon" value="Add" onclick="add()">
                </td>
            </tr>
        </table>
   </form>
  </body>
</html>

分享到:
评论

相关推荐

    JQuery选择器

    &lt;input type="file" /&gt;&lt;br/&gt; &lt;input type="hidden" /&gt;&lt;div style="display:none"&gt;test&lt;/div&gt;&lt;br/&gt; &lt;input type="image" /&gt;&lt;br/&gt; &lt;input type="password" /&gt;&lt;br/&gt; &lt;input type="radio" name="a"/&gt;1&lt;input type=...

    jquery 上传图片前预览

    jquery 上传图片前预览,就只是一个JS文件,使用也... &lt;input type="file"/&gt; &lt;br /&gt; &lt;div style="overflow: hidden; border: 1px solid red;"&gt; &lt;div id="imgDiv"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt;

    jQuery完全实例.rar

    创建一个 &lt;input&gt; 元素必须同时设定 type 属性。因为微软规定 &lt;input&gt; 元素的 type 只能写一次。 jQuery 代码: // 在 IE 中无效: $("&lt;input&gt;").attr("type", "checkbox"); // 在 IE 中有效: $("&lt;input type='...

    jQuery多文件上传并获取大小与格式代码.zip

    input type="file" class="m_upload"&gt; &lt;div class="F_holder"&gt; &lt;div class="img_box img_box_see"&gt; &lt;div class="fileN_see"&gt; &lt;a &gt;&lt;span class="fileSee"&gt;查看&lt;/span&gt;&lt;/a&gt; &lt;a &gt;&lt;span class="fileDown"&gt;下载&lt;/...

    浮点vfdsfJAVA实现链表,双向链表.txtJAVA实现链表,双向链表.txt

    " class="btn files"&gt; &lt;input id="txt_userfile" name="txt_userfile" type="file" onchange="show_uploadfile();" /&gt;&lt;/a&gt; &lt;/dt&gt; &lt;dd&gt; &lt;ul&gt; &lt;li id="li_userfile"&gt;(未选择文件)&lt;/li&gt; ...

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

    主要介绍了jQuery实现input[type=file]多图预览上传删除等功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

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

    如下所示: &lt;table class=exhibit_table xss=removed&gt; ...input type=file name=file style=display:inline; width:180px;/&gt; &lt;button type=button class=btn btn-success btn-xs style=bord

    ajaxfileupload.js结合input[type=file]无刷新上传

    利用jquery的工具ajaxfileupload.js配合input[type=file]实现无刷新上传文件,内含教程以及支持文件,希望可以帮助各位,谢谢!

    jQuery动态添加input type=”file”

    有时候需要在页面上允许用户上传多个文件,个数由用户自己决定,个数多了也可以删除,使用jQuery可以很简单的实现这个功能。 先给大家展示下效果图: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&...

    jQuery动态添加&lt;input type="file"&gt;

    有时候需要在页面上允许用户上传多个文件,个数由用户自己决定,个数多了也可以删除,使用jQuery可以很简单的实现这个功能

    jQuery详细教程

    当我们在教程中演示 jQuery 时,会将函数直接添加到 &lt;head&gt; 部分中。不过,把它们放到一个单独的文件中会更好,就像这样(通过 src 属性来引用文件): 实例 &lt;head&gt; &lt;script type="text/javascript" src="jquery.js...

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

    有时候需要在页面上允许用户上传多个文件,个数由用户自己决定,个数多了也可以删除,使用jQuery可以很简单的实现这个功能

    dangdang和smartstruts2.rar

    &lt;param name="inputName"&gt;image&lt;/param&gt; &lt;/result&gt; &lt;action name="checkcode" class="action.user.CheckCodeAction"&gt; &lt;result name="success" type="json"&gt;&lt;/result&gt; &lt;/action&gt; &lt;action name=...

    网上商城需求报告

    &lt;param name="inputName"&gt;image&lt;/param&gt; &lt;/result&gt; &lt;action name="checkcode" class="action.user.CheckCodeAction"&gt; &lt;result name="success" type="json"&gt;&lt;/result&gt; &lt;/action&gt; &lt;action name="checkemailcode" ...

    Javashop开发规范V2.2

    &lt;type&gt;varchar&lt;/type&gt; &lt;size&gt;255&lt;/size&gt; &lt;option&gt;00&lt;/option&gt; &lt;/field&gt; &lt;/action&gt; 3.2.2 删除表 &lt;action&gt; &lt;command&gt;drop&lt;/command&gt; &lt;table&gt;tablename&lt;/table&gt; &lt;/action&gt; 3.2.3 添加、删除列 &lt;action&gt; ...

    jQuery插件ajaxfileupload.js实现上传文件

    &lt;div class=uploadFile&gt; &lt;span id=doc&gt;&lt;input type=text disabled=disabled /&gt;&lt;/span&gt; &lt;input type=hidden id=hidFileName /&gt; &lt;input type=button id=btnUploadFile value=上传 /&gt; &lt;input ...

    jquery删除table当前行的实例代码

    input type='hidden' name='annex' value="+rs+"&gt; &lt;a href='[removed]void(0);'&gt;"+rs+"&lt;/a&gt; &lt;span xss=removed xss=removed&gt; 删除&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/p&gt; &lt;pre code_snippet_id="1684775" snippet_file_name...

    jquery实现简洁文件上传表单样式

    文章开始先告诉大家制作jquery实现简洁...input type=button name=file class=button value=Browse.../&gt; &lt;input type=file size=30/&gt; &lt;/div&gt; css文件样式: .uploader{ position:relative; display:inline-b

    jQuery上传多张图片带进度条样式(DEMO)

    下面一段代码给大家分享jquery上传多种图片带进度条样式,具体代码如下所示: ...input type=file id=file name=file multiple=multiple&gt; &lt;progress id=uploadprogress min=0 max=100 value=0&gt;

Global site tag (gtag.js) - Google Analytics