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 相关文章推荐
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
Mar 04 Javascript
关于document.cookie的使用javascript
Oct 29 Javascript
javascript smipleChart 简单图标类
Jan 12 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
Nov 27 Javascript
javascript截取字符串小结
Apr 28 Javascript
javascript消除window.close()的提示窗口
May 20 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
Oct 30 Javascript
Bootstrap table右键功能实现方法
Feb 20 Javascript
关于TypeScript中import JSON的正确姿势详解
Jul 25 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
Dec 27 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
Dec 23 Javascript
使用 UniApp 实现小程序的微信登录功能
Jun 09 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实现变色验证码实例
2014/01/06 PHP
php的PDO事务处理机制实例分析
2017/02/16 PHP
PHP实现通过文本文件统计页面访问量功能示例
2019/02/13 PHP
php经典趣味算法实例代码
2020/01/21 PHP
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
2012/02/07 Javascript
Three.js源码阅读笔记(光照部分)
2012/12/27 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
2013/03/14 Javascript
jQuery ajax dataType值为text json探索分享
2013/09/23 Javascript
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
node.js中的fs.close方法使用说明
2014/12/17 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
javascript实现tab切换特效
2015/11/12 Javascript
javascript鼠标右键菜单自定义效果
2020/12/08 Javascript
快速掌握Node.js模块封装及使用
2016/03/21 Javascript
Bootstrap图片轮播组件使用实例解析
2016/06/30 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
2017/04/27 Javascript
使用JavaScript实现一个小程序之99乘法表
2017/09/21 Javascript
JavaScript类的继承方法小结【组合继承分析】
2018/07/11 Javascript
vuex 解决报错this.$store.commit is not a function的方法
2018/12/17 Javascript
Python Web框架Flask中使用新浪SAE云存储实例
2015/02/08 Python
Python入门学习指南分享
2018/04/11 Python
详解Pytorch 使用Pytorch拟合多项式(多项式回归)
2018/05/24 Python
由Python编写的MySQL管理工具代码实例
2019/04/09 Python
Django为窗体加上防机器人的验证码功能过程解析
2019/08/14 Python
python被修饰的函数消失问题解决(基于wraps函数)
2019/11/04 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
深入理解Python 多线程
2020/06/16 Python
Python开发.exe小工具的详细步骤
2021/01/27 Python
css3media响应式布局实例
2016/07/08 HTML / CSS
约瑟夫·特纳男装:Joseph Turner
2017/10/10 全球购物
采购部部长岗位职责
2014/02/06 职场文书
文明礼貌演讲稿
2014/05/12 职场文书
2015年八一建军节演讲稿
2015/03/19 职场文书
2015年感恩节活动总结
2015/03/24 职场文书
python实现socket简单通信的示例代码
2021/04/13 Python
Node实现搜索框进行模糊查询
2021/06/28 Javascript