快捷導(dǎo)航

通過Javascript創(chuàng)建一個(gè)選擇文件的對話框代碼

更新時(shí)間：2012年06月16日 01:56:16 作者：

通過Javascript創(chuàng)建一個(gè)選擇文件的對話框代碼，需要的朋友可以參考下

CSS 樣式:

 
DIV.neat-dialog-cont { 
Z-INDEX: 98; BACKGROUND: none transparent scroll repeat 0% 0%; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 100% 
} 
DIV.neat-dialog-bg { 
Z-INDEX: -1; FILTER: alpha(opacity=70); LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 100%; BACKGROUND-COLOR: #eee; opacity: 0.7; 
} 
DIV.neat-dialog { 
BORDER-RIGHT: #555 1px solid; BORDER-TOP: #555 1px solid; Z-INDEX: 99; MARGIN-LEFT: 35%; BORDER-LEFT: #555 1px solid; WIDTH: 300px; MARGIN-RIGHT: auto; 
BORDER-BOTTOM: #555 1px solid; POSITION: relative; TOP: 25%; BACKGROUND-COLOR: #fff 
} 
DIV.neat-dialog-title { 
PADDING-RIGHT: 0.3em; PADDING-LEFT: 0.3em; FONT-SIZE: 1em; PADDING-BOTTOM: 0.1em; MARGIN: 0px; LINE-HEIGHT: 1.2em; PADDING-TOP: 0.1em; BORDER-BOTTOM: #444 
1px solid; POSITION: relative;background: #36C;color:White; 
} 
DIV.neat-dialog P { 
PADDING-RIGHT: 0.2em; PADDING-LEFT: 0.2em; PADDING-BOTTOM: 0.2em; PADDING-TOP: 0.2em; TEXT-ALIGN: center 
} 

Javascript 代碼：

復(fù)制代碼代碼如下:

 
//打開彈窗 
function f_OpenDialog() { 
var sHTML = '<p><input id="txtFile" type="file" /></p>' + 
'<p><input id="btnYes" type="button" onclick="f_ReadExcel();" value="確定">' + 
'<button id="btnNo" onclick="window.neatDialog.close();">取消</button></p>'; 
new NeatDialog(sHTML, "請選擇Excel文檔!"); 
} 
//關(guān)閉并移除彈窗 
NeatDialog.prototype.close = function () { 
if (this.elt) { 
this.elt.style.display = "none"; 
this.elt.parentNode.removeChild(this.elt); 
} 
window.neatDialog = null; 
} 
//創(chuàng)建彈窗 
function NeatDialog(sHTML, sTitle) { 
window.neatDialog = null; 
this.elt = null; 
if (document.createElement && document.getElementById) { 
var dg = document.createElement("div"); 
dg.className = "neat-dialog"; 
if (sTitle) 
sHTML = '<div class="neat-dialog-title">' + sTitle + '</div>\n' + sHTML; 
dg.innerHTML = sHTML; 
var dbg = document.createElement("div"); 
dbg.id = "nd-bdg"; 
dbg.className = "neat-dialog-bg"; 
var dgc = document.createElement("div"); 
dgc.className = "neat-dialog-cont"; 
dgc.appendChild(dbg); 
dgc.appendChild(dg); 
if (document.body.offsetLeft > 0) { 
dgc.style.marginLeft = document.body.offsetLeft + "px"; 
} 
document.body.appendChild(dgc); 
this.elt = dgc; 
window.neatDialog = this; 
} 
} 

效果：

您可能感興趣的文章:

選擇文件

相關(guān)文章

JS使用 cryptojs加密解密(對稱加密庫)的問題
js 加密解密可以使用 crypto-js,這是一個(gè)對稱加密的庫, 可以使用 AES DES 但沒有 rsa 等非對稱加密的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧
2023-11-11
Ionic快速安裝教程
Ionic 是目前最有潛力的一款 HTML5 手機(jī)應(yīng)用開發(fā)框架。通過 SASS 構(gòu)建應(yīng)用程序，它提供了很多 UI 組件來幫助開發(fā)者開發(fā)強(qiáng)大的應(yīng)用。接下來小編給大家介紹如何安裝 Ionic 在自己的電腦上搭建一個(gè)簡單的小應(yīng)用，感興趣的朋友一起看看吧
2016-06-06
Servlet返回的數(shù)據(jù)js解析2種方法
這篇文章主要介紹了Servlet返回的數(shù)據(jù)js解析2種方法,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-12-12
es6學(xué)習(xí)之解構(gòu)時(shí)應(yīng)該注意的點(diǎn)
解構(gòu)賦值允許你使用類似數(shù)組或?qū)ο笞置媪康恼Z法將數(shù)組和對象的屬性賦給各種變量。這種賦值語法極度簡潔，同時(shí)還比傳統(tǒng)的屬性訪問方法更為清晰，下面這篇文章主要給大家介紹了關(guān)于在es6解構(gòu)時(shí)應(yīng)該注意的點(diǎn)，需要的朋友可以參考下。
2017-08-08
在javascript中實(shí)現(xiàn)函數(shù)數(shù)組的方法
js不進(jìn)行類型檢查，數(shù)組可以存放任何東西。于是我就想數(shù)組里可否存放函數(shù)呢，下面就為大家詳細(xì)介紹下
2013-12-12
詳解JavaScript中Canvas的高級繪圖和動(dòng)畫技術(shù)
JavaScript中的Canvas 是一個(gè)強(qiáng)大的 HTML5 元素,允許你通過編程方式創(chuàng)建圖形、繪制圖像和實(shí)現(xiàn)復(fù)雜的動(dòng)畫效果,在本文中,我們將深入探討 JavaScript Canvas 的高級繪圖和動(dòng)畫技術(shù),并提供一個(gè)復(fù)雜的案例,以展示其潛力,需要的朋友可以參考下
2023-10-10
js獲取當(dāng)前頁面路徑示例講解
本篇文章主要是對js獲取當(dāng)前頁面路徑的示例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-01-01
js代碼編寫無縫輪播圖
這篇文章主要為大家詳細(xì)介紹了js代碼編寫無縫輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09
微信小程序?qū)崿F(xiàn)頂部選項(xiàng)卡(swiper)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)頂部選項(xiàng)卡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
JavaScript實(shí)現(xiàn)放大鏡效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10