当前位置:软件学堂 > 资讯首页 > 网络编程 > 编程其他 > JS实现文件上传一次性完成

JS实现文件上传一次性完成

2012/11/10 19:31:23作者:佚名来源:网络

移动端

【实例名称】

JS实现文件上传一次性完成

【实例描述】

默认的HTML控件file可以实现文件的上传,但必须经过选择文件和单击上传按钮两个步骤。本例学习如何实现一步上传文件的操作。

【实例代码】

<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页-学无忧(www.xue51.com)</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”方法实现文件的选择。当选择文件后,触发file控件的“onpropertychange”事件,在其中完成上传文件名的获取。

【源码下载】

为了JS代码的准确性,请点击:上传文件一次完成 进行本实例源码下载 

标签: 上传