【实例名称】
JS实现文件上传一次性完成
【实例描述】
默认的HTML控件file可以实现文件的上传,但必须经过选择文件和单击上传按钮两个步骤。本例学习如何实现一步上传文件的操作。
例子
代码如下 | 复制代码 |
onpropertychange="document.getElementById('filename'). innerText=this.value" /> javascript:document.getElementById('myfile').click()"> 浏览... |
效果
【难点剖析】
本例将file控件隐藏,然后使用a标签的“href”属性调用file控件的“click”方法实现文件的选择。当选择文件后,触发file控件的“onpropertychange”事件,在其中完成上传文件名的获取。
但发现兼容性不好
代码如下 | 复制代码 |
|
下面再推荐一个jquery文件上传控件非常好用
jQuery插件AjaxFileUpload可以实现ajax文件上传,需要jQuery库文件和ajaxfileupload.js
一.引入部分
代码如下 | 复制代码 |
二.
部分代码如下 | 复制代码 |
注意:使用AjaxFileUpload插件上传文件可不需要form
代码如下 | 复制代码 |
|
三.js部分
代码如下 | 复制代码 |
function changImg(){ $.ajaxFileUpload //提交成功后处理函数 html为返回值,status为执行的状态 }, //提交失败处理函数 } |
四.原理
利用jQuery的选择器获得file文件上传框中的文件路径值,然后动态的创建一个iframe,并在里面建立一个新的file 文件框,提供post方式提交到后台。最后,返回结果到前台。