快捷導(dǎo)航

JavaScript動(dòng)態(tài)數(shù)量的文件上傳控件

更新時(shí)間：2016年11月18日 14:08:53 作者：li_magic

本文給大家分享一段js代碼關(guān)于動(dòng)態(tài)數(shù)量的文件上傳控件，代碼簡(jiǎn)單易懂，非常不錯(cuò)具有參考借鑒價(jià)值，感興趣的朋友一起看看

js動(dòng)態(tài)數(shù)量的文件上傳控件實(shí)現(xiàn)代碼如下所述：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>動(dòng)態(tài)數(shù)量的文件上傳</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();
//對(duì)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>

好了，代碼到此結(jié)束了，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的，在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

淺談JS原生Ajax,GET和POST
下面小編就為大家?guī)?lái)一篇淺談JS原生Ajax,GET和POST。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-06-06
JS實(shí)現(xiàn)移動(dòng)端按首字母檢索城市列表附源碼下載
我們常見的手機(jī)通訊錄或微信通訊錄，聯(lián)系人信息是按字母順序排列的列表，通過(guò)點(diǎn)擊右側(cè)的字母，會(huì)迅速定位檢索到首字母對(duì)應(yīng)的聯(lián)系人。下面通過(guò)本文給大家分享JS實(shí)現(xiàn)移動(dòng)端按首字母檢索城市列表功能，需要的的朋友參考下吧
2017-07-07
通過(guò)實(shí)例解析JavaScript for in及for of區(qū)別
這篇文章主要介紹了通過(guò)實(shí)例解析JavaScript for in及for of區(qū)別,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-06-06
關(guān)于var在for循環(huán)遇到的問(wèn)題解決
這篇文章主要給大家介紹了關(guān)于var在for循環(huán)遇到的問(wèn)題的幾種解決方法,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2021-07-07
Javascript 運(yùn)動(dòng)中Offset的bug解決方案
這篇文章主要介紹了Javascript 運(yùn)動(dòng)中Offset的bug解決方案,需要的朋友可以參考下
2014-12-12
Echarts折線圖實(shí)現(xiàn)一條折線顯示不同顏色的方法
這篇文章主要給大家介紹了關(guān)于Echarts折線圖實(shí)現(xiàn)一條折線顯示不同顏色的相關(guān)資料,Echarts的折線圖可以通過(guò)設(shè)置series中的itemStyle屬性來(lái)改變折線的顏色,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-02-02
layui table動(dòng)態(tài)表頭改變表格頭部重新加載表格的方法
今天小編就為大家分享一篇layui table動(dòng)態(tài)表頭改變表格頭部重新加載表格的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-09-09
B/S模式項(xiàng)目中常用的javascript匯總
本篇文章是對(duì)B/S模式項(xiàng)目中常用的javascript進(jìn)行了匯總介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-12-12
Javascript點(diǎn)擊按鈕隨機(jī)改變數(shù)字與其顏色
這篇文章主要介紹了Javascript點(diǎn)擊按鈕隨機(jī)改變數(shù)字和其字體的顏色，實(shí)現(xiàn)后的效果很不錯(cuò)，具有一定的參考價(jià)值，有需要的可以參考借鑒，下面來(lái)一起看看。
2016-09-09
location.search在客戶端獲取Url參數(shù)的方法
最近一直在寫html，剛接觸到，感覺挺復(fù)雜的。。比如傳參，在.net里可以直接用Request接受，而在html中還要經(jīng)過(guò)處理，找了一些資料，寫了個(gè)方法。
2010-06-06