Javascript & DHTML上傳文件控件第3/4頁
更新時(shí)間:2008年07月03日 21:46:31 作者:
首先來做一個(gè)實(shí)例,批量上傳的UI控件。以后一般做的示例也是以UI控件為主的。都是封裝成Object或者用Function封裝成"Class"類。
上面remove方法過于重復(fù),可考慮重新把remove再簡化,從而使我們的代碼更簡短而且易于維護(hù)呢?在這里,我們把這個(gè)通用功能放到一個(gè)函數(shù)里,也就是多加一個(gè)函數(shù):
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
四、將代碼組合一下,基本上可以算是完成了:D
復(fù)制代碼 代碼如下:
<script>
function upload(target/*容器*/
)
{
this._cnt = 0; /*計(jì)數(shù)器*/
this.target = document.getElementById(target);
};
upload.prototype.add = function () {
/*
*生成一個(gè) file
*/
var self = this; var cnt = this._cnt;
var cFile = document.createElement("input");
cFile.type="file"; cFile.name="upload";
cFile.id = "upload_file_" +cnt;
/*
*生成一個(gè) 添加
*/
var cAdd = document.createElement("span");
cAdd.innerHTML="添加";
cAdd.onclick = function () {
self.add();
};
/*
*生成一個(gè) 刪除
*/
var cRemove = document.createElement("span");
cRemove.innerHTML="刪除";
cRemove.onclick = function () {
self.remove(cnt);
};
cAdd.id = "upload_add_" +cnt;
cRemove.id = "upload_remove_" +cnt;
/* 把所有生成的信息添加到容器中 */
this.target.appendChild(cFile);
this.target.appendChild(cAdd);
this.target.appendChild(cRemove);
/* 計(jì)數(shù)器+1 */
this._cnt++;
return this; //返回
};
upload.prototype._removeNode = function (id) {
var a=document.getElementById(id);
a.parentNode.removeChild(a);
};
upload.prototype.remove = function (n) {
/*
*刪除一個(gè) file
*/
this._removeNode("upload_file_" +n);
/*
*刪除一個(gè) 添加
*/
this._removeNode("upload_add_" +n);
/*
*刪除一個(gè) 刪除
*/
this._removeNode("upload_remove_" +n);
return this;
}
</script>
相關(guān)文章
js實(shí)現(xiàn)數(shù)組和對(duì)象的深淺拷貝
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)數(shù)組和對(duì)象的深淺拷貝,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-09-09Javascript的promise,async和await的區(qū)別詳解
這篇文章主要為大家詳細(xì)介紹了Javascript的promise,async和await的區(qū)別,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-03-03JavaScript閉包和作用域鏈的定義實(shí)現(xiàn)
這篇文章主要為大家介紹了JavaScript閉包和作用域鏈的定義與實(shí)現(xiàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05javascript 玩轉(zhuǎn)Date對(duì)象(實(shí)例講解)
下面小編就為大家?guī)硪黄猨avascript 玩轉(zhuǎn)Date對(duì)象(實(shí)例講解)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07JavaScript算法學(xué)習(xí)之冒泡排序和選擇排序
這篇文章主要給大家介紹了關(guān)于JavaScript算法學(xué)習(xí)之冒泡排序和選擇排序的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11JavaScript判斷textarea值是否為空并給出相應(yīng)提示
假如用戶沒有輸入數(shù)據(jù)則給出相應(yīng)提示,那么該如何來判斷呢?下面以判斷textarea值是否為空為例2014-09-09使用js判斷數(shù)組中是否包含某一元素(類似于php中的in_array())
這篇文章主要是對(duì)使用js判斷數(shù)組中是否包含某一元素(類似于php中的in_array())需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-12-12