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

时间：2021-05-26

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>

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章