Javascript & DHTML上傳文件控件第1/4頁
上章基本上把要交代的基本知識都說了一些,今天終于開始寫代碼了:D
首先來做一個實(shí)例,批量上傳的UI控件。以后一般做的示例也是以UI控件為主的。都是封裝成Object或者用Function封裝成"Class"類。
也許對于單單看前幾章的朋友來說這個例子過于深奧了,但是不用擔(dān)心,一步步來解釋應(yīng)該很快理解的,關(guān)鍵是理解怎么做,而不是怎么寫。
首先看一個成品截圖預(yù)覽:
一、接下來我們先說思路,首先定義一個upload"類",
一)、這個類的公共訪問信息應(yīng)該有:
1、構(gòu)造函數(shù)中要傳遞一些必要的參數(shù),比如,在哪個容器構(gòu)造upload的信息。
2、必須有一個add()方法,用于添加一個upload
3、必須有一個remove()方法,用于刪除一個upload
二)、這個類中應(yīng)該有一些必要的信息,是生成實(shí)例本身所具有的信息,(upload對象的一些信息)。
1、得到一共多少個upload信息,
2、一個容器對象,這個對象也是從構(gòu)造函數(shù)中傳遞。
整個圖可以簡單的表示為
二、我想我們該想想應(yīng)該用到哪些知識,哪些是熟悉的,哪些是未知的。
一)、正如我們上面預(yù)覽圖所見到的,需要三個或以上的新控件。(添加,刪除,還有一個file控件,也或者還有其它的...但至少眼睛見到的就這么多了),既然是新的信息,就會可能用到document.createElement,要添加進(jìn)一個容器里就可能用到object.appendChild(obj)或者obj.insertBefore()方法。刪除也就是obj.parentNode.removeChild(obj)。這些上一章都已經(jīng)說過了。
二)、既然是控件,肯定得用function或者是一個對象(object)封裝起來,對這部分知識,第一章已經(jīng)簡單的說明了
三)、如何組織呢?在上面的思路中也已經(jīng)有了文字和圖示
接下來就動手寫:
一)、構(gòu)造函數(shù),以及基本的代碼(偽代碼)
<script>
function upload(target/*容器*/
)
{
this._cnt = 0; /*計數(shù)器*/
this.target = document.getElementById(target);
};
upload.prototype.add = function () {
/*
*生成一個 file
*生成一個 添加
*生成一個 刪除
*計數(shù)器+1
*/
};
upload.prototype.remove = function () {
/*
*刪除一個 file
*刪除一個 添加
*刪除一個 刪除
*/
};
</script>
相關(guān)文章
js實(shí)現(xiàn)數(shù)組和對象的深淺拷貝
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)數(shù)組和對象的深淺拷貝,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-09-09Javascript的promise,async和await的區(qū)別詳解
這篇文章主要為大家詳細(xì)介紹了Javascript的promise,async和await的區(qū)別,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-03-03JavaScript閉包和作用域鏈的定義實(shí)現(xiàn)
這篇文章主要為大家介紹了JavaScript閉包和作用域鏈的定義與實(shí)現(xiàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05javascript 玩轉(zhuǎn)Date對象(實(shí)例講解)
下面小編就為大家?guī)硪黄猨avascript 玩轉(zhuǎn)Date對象(實(shí)例講解)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-07-07JavaScript算法學(xué)習(xí)之冒泡排序和選擇排序
這篇文章主要給大家介紹了關(guān)于JavaScript算法學(xué)習(xí)之冒泡排序和選擇排序的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11JavaScript判斷textarea值是否為空并給出相應(yīng)提示
假如用戶沒有輸入數(shù)據(jù)則給出相應(yīng)提示,那么該如何來判斷呢?下面以判斷textarea值是否為空為例2014-09-09使用js判斷數(shù)組中是否包含某一元素(類似于php中的in_array())
這篇文章主要是對使用js判斷數(shù)組中是否包含某一元素(類似于php中的in_array())需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12