Home > Article > Web Front-end > JavaScript dynamic number of file upload controls

JavaScript dynamic number of file upload controls

高洛峰Original: 2016-12-06 14:15:271044browse

The js dynamic number of file upload control implementation code is as follows:

<!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=&#39;file&#39;><td>File"
+i+":</td><td><input type=&#39;file&#39; name=&#39;file"
+i+"&#39;/></td></tr>"
+"<tr class=&#39;desc&#39;><td>Desc"
+i+":</td><td><input type=&#39;text&#39; name=&#39;desc"
+i+"&#39;/><button id=&#39;delete"
+i+"&#39;>删除</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>

Okay, the code is over here, I hope it will be helpful to everyone

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JS implements clicking on the web page to determine whether to install the app and open it, otherwise jump to the app storeNext article：JS implements clicking on the web page to determine whether to install the app and open it, otherwise jump to the app store

See more

JavaScript dynamic number of file upload controls

Related articles