發(fā)郵件是需要添加一些文件，每添加一個(gè)文件，頁面上可以顯示一個(gè)表單文件上傳選項(xiàng)。

此功能為：初始時(shí)刻只有一個(gè)添加按鈕，當(dāng)點(diǎn)擊添加文件時(shí)，會(huì)增加一個(gè)選擇文件和刪除區(qū)域，同時(shí)顯示上傳按鈕，當(dāng)點(diǎn)擊刪除，此行選擇文件行消失，當(dāng)所有選擇文件項(xiàng)都消失時(shí)，上傳按鈕將被隱藏起來。下面是實(shí)例代碼：

動(dòng)態(tài)添加文件上傳列表

var num=0;

function addFile(event){

//創(chuàng)建一個(gè)div標(biāo)簽，用以包含一個(gè)input標(biāo)簽和刪除按鈕

var innerdiv = document.createElement("div");

//創(chuàng)建一個(gè)input標(biāo)簽

var inputNode = document.createElement("input");

inputNode.name = "fileName";

inputNode.type="file";

//創(chuàng)建一個(gè)刪除按鈕

var delNode = document.createElement("input");

delNode.name = "del";

delNode.type = "button";

delNode.value="刪除";

var submit = document.getElementById("submit");

//刪除當(dāng)前刪除按鈕所在的標(biāo)簽,為此按鈕點(diǎn)擊事件創(chuàng)建一個(gè)處理函數(shù)

delNode.onclick = function d(){

this.parentNode.parentNode.removeChild(this.parentNode); //刪除此div區(qū)域

var fileNodes = document.getElementsByName("fileName");

//當(dāng)沒有上傳文件時(shí)，隱藏submit按鈕

if(fileNodes.length==0){

submit.style.display="none";

}

};

innerdiv.appendChild(inputNode);

innerdiv.appendChild(delNode);

var div = document.getElementById("file");

div.appendChild(innerdiv);

submit.style.display="block";

}

上傳文件:

此實(shí)例代碼中，addFile將動(dòng)態(tài)增加一個(gè)div區(qū)域，div區(qū)域包含一個(gè)file input標(biāo)簽和刪除按鈕。

動(dòng)態(tài)創(chuàng)建一個(gè)input標(biāo)簽示例：

//創(chuàng)建一個(gè)div標(biāo)簽，用以包含一個(gè)input標(biāo)簽和刪除按鈕

var innerdiv = document.createElement("div");

//創(chuàng)建一個(gè)input標(biāo)簽

var inputNode = document.createElement("input");

inputNode.name = "fileName";

inputNode.type="file";

innerdiv.appendChild(inputNode);

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的静态html js文件上传,js实现动态添加上传文件页面的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。