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

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

2012/11/10 19:31:23作者：佚名來源：網絡

移動端

【實例名稱】

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

【實例描述】

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

【實例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標題頁-學無憂（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標簽的“href”屬性調用file控件的“click”方法實現(xiàn)文件的選擇。當選擇文件后，觸發(fā)file控件的“onpropertychange”事件，在其中完成上傳文件名的獲取。

【源碼下載】

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

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