jQuery不使用插件及swf实现无刷新文件上传


Posted in Javascript onDecember 08, 2014

文件上传是网站常用的功能,例如附件或图片的上传功能,解决方案也有很多,我们今天介绍一种通过jQuery无刷新的文件上传方式。

首先,我们在页面中放一个form,用来上传文件:

<form id="myForm" method="post" action="/asyncFileUpload/UploadHandler.ashx" 

    enctype="multipart/form-data" target="asyncTarget">

    <span>文件:</span>

    <input type="file" name="myFile" />

</form>

<input type="button" value="上传" id="btnUpload" />

然后,在页面中放一个iframe,在上传的时候只刷新iframe,而不是整个网页:

<iframe name="asyncTarget" style="display: none;"></iframe>

接下来使用js为按钮添加功能:

<script>

    $(function () {

        $("#btnUpload").click(function () {

            $("#myForm").submit();

        });

    });

</script>

在按钮单击的时候,将form提交。

这个方案可以简单的实现无刷新的文件上传。它的实现思路是:将form提交到一个iframe中,其它的处理就像处理普通的form提交一样了。

这个方案的待完善地方是如何判断上传完成,目前只有一个思路:通过js监听iframe的readystate,然后解析iframe的内容。

Javascript 相关文章推荐
一个XML格式数据转换为图表的例子
Feb 09 Javascript
img onload事件绑定各浏览器均可执行
Dec 19 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
Jun 30 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
Jun 01 Javascript
JavaScript之AOP编程实例
Jul 17 Javascript
详解Bootstrap glyphicons字体图标
Jan 04 Javascript
JavaScript头像上传插件源码分享
Mar 29 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
Apr 25 Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
小程序如何支持使用 async/await详解
Sep 12 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
Jul 28 Javascript
javascript中的this详解
Dec 08 #Javascript
node.js中的path.isAbsolute方法使用说明
Dec 08 #Javascript
node.js中的path.join方法使用说明
Dec 08 #Javascript
node.js中的path.normalize方法使用说明
Dec 08 #Javascript
node.js中的path.sep方法使用说明
Dec 08 #Javascript
node.js中的path.resolve方法使用说明
Dec 08 #Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
Dec 08 #Javascript
You might like
php中大括号作用介绍
2012/03/22 PHP
PHP将session信息存储到数据库的类实例
2015/03/04 PHP
php中关于socket的系列函数总结
2015/05/18 PHP
php实现映射操作实例详解
2019/10/02 PHP
Laravel第三方包报class not found的解决方法
2019/10/13 PHP
在textarea中显示html页面的javascript代码
2007/04/20 Javascript
Document对象内容集合(比较全)
2010/09/06 Javascript
javascript面向对象之二 命名空间
2011/02/08 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
2013/08/07 Javascript
JS操作Cookies的小例子
2013/10/15 Javascript
JavaScript的模块化开发框架Sea.js上手指南
2016/05/12 Javascript
详解JavaScript模块化开发
2016/12/04 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
2020/10/20 Javascript
uniapp电商小程序实现订单30分钟倒计时
2020/11/01 Javascript
[00:35]可解锁地面特效
2018/12/20 DOTA
python基础教程之lambda表达式使用方法
2014/02/12 Python
python创建关联数组(字典)的方法
2015/05/04 Python
Python使用QRCode模块生成二维码实例详解
2017/06/14 Python
Python实现破解12306图片验证码的方法分析
2017/12/29 Python
利用python 更新ssh 远程代码 操作远程服务器的实现代码
2018/02/08 Python
python使用ddt过程中遇到的问题及解决方案【推荐】
2018/10/29 Python
Python实现八皇后问题示例代码
2018/12/09 Python
Python查找文件中包含中文的行方法
2018/12/19 Python
Python实现字符型图片验证码识别完整过程详解
2019/05/10 Python
python 自定义装饰器实例详解
2019/07/20 Python
Python基于Faker假数据构造库
2020/11/30 Python
python中判断数字是否为质数的实例讲解
2020/12/06 Python
.NET面试题:什么是反射
2016/09/30 面试题
学校安全教育制度
2014/01/31 职场文书
竞聘演讲稿
2014/04/24 职场文书
2014年学校国庆主题活动方案
2014/09/16 职场文书
先进班集体申报材料
2014/12/26 职场文书
预备党员介绍人意见
2015/06/01 职场文书
重阳节简报
2015/07/20 职场文书
小学语文教学反思范文
2016/03/03 职场文书
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript