suchen

Heim >Web-Frontend >js-Tutorial >Dynamische JavaScript-Anzahl von Datei-Upload-Steuerelementen

Dynamische JavaScript-Anzahl von Datei-Upload-Steuerelementen

高洛峰
高洛峰Original
2016-12-06 14:15:271122Durchsuche

Der Implementierungscode für die dynamische Anzahl der Datei-Upload-Steuerung von js lautet wie folgt: 

<!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, der Code ist hier, ich hoffe, er wird für alle hilfreich sein

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JS implementiert das Klicken auf die Webseite, um zu bestimmen, ob die App installiert und geöffnet werden soll, andernfalls springt man zum App StoreNächster Artikel：JS implementiert das Klicken auf die Webseite, um zu bestimmen, ob die App installiert und geöffnet werden soll, andernfalls springt man zum App Store

In Verbindung stehende Artikel

Mehr sehen