Javascript & DHTML上傳文件控件
更新時間:2008年07月03日 21:46:31 作者:
首先來做一個實例,批量上傳的UI控件。以后一般做的示例也是以UI控件為主的。都是封裝成Object或者用Function封裝成"Class"類。
五、OK,加上相關(guān)的html代碼就好了:
復(fù)制代碼 代碼如下:
<html>
<head>
<script>
//這里是上面我們寫的控件代碼,這里由于篇幅,我就不再貼了
</script>
</head>
<body>
<div id="uploadContainer"></div>
<script>
var o=new upload("uploadConainer");
o.add();
</script>
</body>
</html>
六、嗯,已經(jīng)看到效果了吧,但似乎不太理想,全部添加的都粘在一起了,有必要要美化一下。從何處入手?這里可以有很多選擇:
1、加一個換行符<br>
2、每添加一個upload就再加一個容器div
...等
我們這里添加一個容器,如果以后還要加什么東西,會更好加一些,修改add:
復(fù)制代碼 代碼如下:
<script>
upload.prototype.add = function () {
/*
*生成一個 file
*/
var self = this; var cnt = this._cnt;
var cWrap = document.createElement("div");
cWrap.id = "upload_wrap_" +cnt;
var cFile = document.createElement("input");
cFile.type="file"; cFile.name="upload";
cFile.id = "upload_file_" +cnt;
/*
*生成一個 添加
*/
var cAdd = document.createElement("span");
cAdd.innerHTML="添加";
cAdd.onclick = function () {
self.add();
};
/*
*生成一個 刪除
*/
var cRemove = document.createElement("span");
cRemove.innerHTML="刪除";
cRemove.onclick = function () {
self.remove(cnt);
};
cAdd.id = "upload_add_" +cnt;
cRemove.id = "upload_remove_" +cnt;
/* 把所有生成的信息添加到容器中 */
cWrap.appendChild(cFile);
cWrap.appendChild(cAdd);
cWrap.appendChild(cRemove);
this.target.appendChild(cWrap);
/* 計數(shù)器+1 */
this._cnt++;
return this; //返回
};
</script>
七、加上CSS美化一下,最后的代碼如下:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
相關(guān)文章
Javascript的promise,async和await的區(qū)別詳解
這篇文章主要為大家詳細介紹了Javascript的promise,async和await的區(qū)別,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-03-03javascript 玩轉(zhuǎn)Date對象(實例講解)
下面小編就為大家?guī)硪黄猨avascript 玩轉(zhuǎn)Date對象(實例講解)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-07-07JavaScript判斷textarea值是否為空并給出相應(yīng)提示
假如用戶沒有輸入數(shù)據(jù)則給出相應(yīng)提示,那么該如何來判斷呢?下面以判斷textarea值是否為空為例2014-09-09使用js判斷數(shù)組中是否包含某一元素(類似于php中的in_array())
這篇文章主要是對使用js判斷數(shù)組中是否包含某一元素(類似于php中的in_array())需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12