快捷導(dǎo)航

JavaScript設(shè)置表單上傳時(shí)文件個(gè)數(shù)的方法

更新時(shí)間：2015年08月11日 12:44:52 作者：皮蛋

這篇文章主要介紹了JavaScript設(shè)置表單上傳時(shí)文件個(gè)數(shù)的方法,可實(shí)現(xiàn)動(dòng)態(tài)增加及刪除表單上傳按鈕的功能,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下

本文實(shí)例講述了JavaScript設(shè)置表單上傳時(shí)文件個(gè)數(shù)的方法。分享給大家供大家參考。具體如下：

這是一個(gè)比較實(shí)用的功能，用JavaScript來(lái)設(shè)置表單上傳文件時(shí)，根據(jù)需要生成上傳表單，要幾個(gè)生成幾個(gè)，在網(wǎng)易郵箱、新浪郵箱的添加附件功能里都有這種功能，不過這一款沒有刪除表單的功能，如果輸入的多了，只好重新來(lái)過啦

運(yùn)行效果如下圖所示：

具體代碼如下：

<title>JavaScript設(shè)置表單上傳時(shí)的文件個(gè)數(shù)</title>
<input type="button" name="button" value="添加附件" onclick="addInput()">
<input type="button" name="button" value="刪除附件" onclick="deleteInput()">
<span id="upload"></span>
<script type="text/javascript">
 var attachname = "attach";
 var i=1;
  function addInput(){
  if(i>0){
   var attach = attachname + i ;
   if(createInput(attach))
    i=i+1;
  }
  } 
  function deleteInput(){
   if(i>1){
   i=i-1;
   if(!removeInput())
    i=i+1;
   }
  } 
  function createInput(nm){ 
  var aElement=document.createElement("input"); 
  aElement.name=nm;
  aElement.id=nm;
  aElement.type="file";
  aElement.size="50";
  //aElement.value="thanks"; 
  //aElement.onclick=Function("asdf()"); 
   if(document.getElementById("upload").appendChild(aElement) == null)
    return false;
   return true;
  } 
  function removeInput(nm){
   var aElement = document.getElementById("upload");
   if(aElement.removeChild(aElement.lastChild) == null)
   return false;
   return true; 
  } 
</script>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

當(dāng)前流行的JavaScript代碼風(fēng)格指南
這篇文章主要介紹了當(dāng)前流行的JavaScript代碼風(fēng)格指南,同時(shí)推薦了一款風(fēng)格檢驗(yàn)工具jshint,可以配合大多數(shù)的編輯器統(tǒng)一團(tuán)隊(duì)代碼風(fēng)格,需要的朋友可以參考下
2014-09-09
js中的document.querySelector()方法舉例詳解
這篇文章主要給大家介紹了關(guān)于js中document.querySelector()方法的相關(guān)資料,document.querySelector是JavaScript中的一個(gè)內(nèi)置方法,用于通過CSS選擇器選擇文檔中的第一個(gè)匹配元素,需要的朋友可以參考下
2024-01-01
JavaScript裝箱及拆箱boxing及unBoxing用法解析
這篇文章主要介紹了JavaScript裝箱及拆箱boxing及unBoxing用法解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-06-06
微信小程序?qū)崿F(xiàn)寫入讀取緩存詳解
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)寫入緩存與讀取緩存詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-08-08
JavaScript基于面向?qū)ο髮?shí)現(xiàn)的猜拳游戲
這篇文章主要介紹了JavaScript基于面向?qū)ο髮?shí)現(xiàn)的猜拳游戲,結(jié)合完整實(shí)例形式分析了javascript基于面向?qū)ο髮?shí)現(xiàn)猜拳游戲的具體頁(yè)面布局、樣式及功能相關(guān)操作技巧,需要的朋友可以參考下
2018-01-01
Bootstrap CSS組件之按鈕下拉菜單
這篇文章主要為大家詳細(xì)介紹了Bootstrap CSS組件之按鈕下拉菜單，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
JavaScript中數(shù)據(jù)結(jié)構(gòu)與算法(三)：鏈表
這篇文章主要介紹了JavaScript中數(shù)據(jù)結(jié)構(gòu)與算法(三)：鏈表,本文分別講解了單鏈表與雙鏈表以及增加節(jié)和刪除節(jié)的代碼實(shí)例,需要的朋友可以參考下
2015-06-06
關(guān)于redux-saga中take使用方法詳解
本篇文章主要介紹了關(guān)于redux-saga中take使用方法詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2018-02-02
webpack中CommonsChunkPlugin詳細(xì)教程(小結(jié))
本篇文章主要介紹了webpack中CommonsChunkPlugin詳細(xì)教程(小結(jié))，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2017-11-11
javascript之DIV拖動(dòng)類支持在FF下拖動(dòng),調(diào)用簡(jiǎn)單
javascript之DIV拖動(dòng)類支持在FF下拖動(dòng),調(diào)用簡(jiǎn)單...
2007-08-08