JavaScript动态数量的文件上传控件

2019-11-19 18:55:44

字体：大中小

来源：转载

供稿：网友

js动态数量的文件上传控件实现代码如下所述：

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>动态数量的文件上传</title><script type="text/javascript" src="jquery-2.2.0.min.js"></script><script type="text/javascript">$(function(){var i=2;$("#addFile").click(function(){$(this).parent().parent().before("<tr class='file'><td>File"+i+":</td><td><input type='file' name='file"+i+"'/></td></tr>"+"<tr class='desc'><td>Desc"+i+":</td><td><input type='text' name='desc"+i+"'/><button id='delete"+i+"'>删除</button></td></tr>");i++;//删除$("#delete"+(i-1)).click(function(){var $tr=$(this).parent().parent();$tr.prev("tr").remove();$tr.remove();//对i排序$(".file").each(function(index){var n=index+1;$(this).find("td:first").text("File"+n);$(this).find("td:last input").attr("name","file"+n);});$(".desc").each(function(index){var n=index+1;$(this).find("td:first").text("Desc"+n);$(this).find("td:last input").attr("name","desc"+n);});});});});</script></head><body><table><tr class="file"><td>File1:</td><td><input type="file" name="file1"/></td></tr><tr class="desc"><td>Desc1:</td><td><input type="text" name="desc1"/></td></tr><tr><td><input type="submit" id="submit" value="上传"/></td><td><button id="addFile">增加</button></td></tr></table></body></html>

好了，代码到此结束了，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的，在此也非常感谢大家对武林网网站的支持！

上一篇：基于jQuery的checkbox全选问题分析

下一篇：JS识别浏览器类型(电脑浏览器和手机浏览器)