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 相关文章推荐
原生js实现跨浏览器获取鼠标按键的值
Apr 08 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
Feb 22 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
Aug 15 Javascript
文件上传的几个示例分享【推荐】
Dec 16 Javascript
JS获取多维数组中相同键的值实现方法示例
Jan 06 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
Jul 31 Javascript
Vue实例中生命周期created和mounted的区别详解
Aug 25 Javascript
使用mint-ui开发项目的一些心得(分享)
Sep 07 Javascript
vue组件与复用详解
Apr 08 Javascript
React 源码中的依赖注入方法
Nov 07 Javascript
vue自定义正在加载动画的例子
Nov 14 Javascript
js校验开始时间和结束时间
May 26 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
用Socket发送电子邮件(利用需要验证的SMTP服务器)
2006/10/09 PHP
几款免费开源的不用数据库的php的cms
2010/12/19 PHP
PHP实现获取某个月份周次信息的方法
2015/08/11 PHP
thinkPHP中_initialize方法实例分析
2016/12/05 PHP
thinkphp5实现无限级分类
2019/02/18 PHP
ThinkPHP5&amp;5.1框架关联模型分页操作示例
2019/08/03 PHP
JavaScript网页制作特殊效果用随机数
2007/05/22 Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
2011/05/24 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
2013/03/19 Javascript
js 绑定键盘鼠标事件示例代码
2014/02/12 Javascript
Node.js模块加载详解
2014/08/16 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
2015/03/05 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
jquery简单实现网页层的展开与收缩效果
2015/08/07 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
2015/09/14 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
2016/05/05 Javascript
js removeChild 方法深入理解
2016/08/16 Javascript
JS三目运算(三元运算)方法详解
2017/03/01 Javascript
angular过滤器实现排序功能
2017/06/27 Javascript
Python的Django框架中的表单处理示例
2015/07/17 Python
python远程连接MySQL数据库
2019/04/19 Python
Python使用matplotlib绘制三维参数曲线操作示例
2019/09/10 Python
From CSV to SQLite3 by python 导入csv到sqlite实例
2020/02/14 Python
python实现手势识别的示例(入门)
2020/04/15 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
Bootstrap File Input文件上传组件
2020/12/01 HTML / CSS
Puccini乌克兰:购买行李箱、女士手袋网上商店
2020/08/06 全球购物
Java面试题及答案
2012/09/08 面试题
自荐书模板
2013/12/15 职场文书
物流仓管员工作职责
2014/01/06 职场文书
认购协议书范本
2014/04/22 职场文书
2014年自愿离婚协议书
2014/10/10 职场文书
MySQL之高可用集群部署及故障切换实现
2021/04/22 MySQL
详解TypeScript中的类型保护
2021/04/29 Javascript
零基础学java之循环语句的使用
2022/04/10 Java/Android
Golang MatrixOne使用介绍和汇编语法
2022/04/19 Golang