當(dāng)前位置：軟件學(xué)堂 > 資訊首頁 > 網(wǎng)絡(luò)編程 > 編程其他 > JS實現(xiàn)文件上傳一次性完成

JS實現(xiàn)文件上傳一次性完成

2012/11/10 19:31:23作者：佚名來源：網(wǎng)絡(luò)

移動端

【實例名稱】

JS實現(xiàn)文件上傳一次性完成

【實例描述】

默認(rèn)的HTML控件file可以實現(xiàn)文件的上傳，但必須經(jīng)過選擇文件和單擊上傳按鈕兩個步驟。本例學(xué)習(xí)如何實現(xiàn)一步上傳文件的操作。

【實例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標(biāo)題頁-學(xué)無憂（m.wangbatian.cn）</title>
</head>
<body>
<input id="myfile" type="file" style="display:none" 
onpropertychange="document.getElementById('filename').
innerText=this.value" />
<a href="javascript:document.getElementById('myfile').click()">
瀏覽...</a>
<br />
<span id="filename"></span>
</body>
</html>

【運行效果】

 上傳文件一次完成運行效果

【難點剖析】

本例將file控件隱藏，然后使用a標(biāo)簽的“href”屬性調(diào)用file控件的“click”方法實現(xiàn)文件的選擇。當(dāng)選擇文件后，觸發(fā)file控件的“onpropertychange”事件，在其中完成上傳文件名的獲取。

【源碼下載】

為了JS代碼的準(zhǔn)確性，請點擊：上傳文件一次完成 進(jìn)行本實例源碼下載 

標(biāo)簽： JS實現(xiàn)  上傳