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 02 Javascript
使用 Node.js 做 Function Test实现方法
Oct 25 Javascript
JavaScript编程学习技巧汇总
Feb 21 Javascript
基于javascript实现泡泡大冒险网页版小游戏
Mar 23 Javascript
Bootstrap作品展示站点实战项目2
Oct 14 Javascript
Bootstrap路径导航与分页学习使用
Feb 08 Javascript
用node和express连接mysql实现登录注册的实现代码
Jul 05 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
Jul 18 Javascript
浅谈Node 调试工具入门教程
Mar 20 Javascript
JavaScript定时器设置、使用与倒计时案例详解
Jul 08 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
Sep 12 Javascript
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
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/05/22 PHP
JS 有趣的eval优化输入验证实例代码
2013/09/22 Javascript
JS求平均值的小例子
2013/11/29 Javascript
JS实现多物体缓冲运动实例代码
2013/11/29 Javascript
JS限制文本框只能输入数字和字母方法
2015/02/28 Javascript
jQuery焦点图轮播特效代码分享(3款)
2015/09/05 Javascript
基于javascript实现仿百度输入框自动匹配功能
2016/01/03 Javascript
学习javascript面向对象 掌握创建对象的9种方式
2016/01/04 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
2016/01/25 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
2016/01/26 Javascript
Angularjs中UI Router的使用方法
2016/05/14 Javascript
JS本地刷新返回上一页代码
2016/07/25 Javascript
jQuery层次选择器用法示例
2016/09/09 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
2020/06/17 Javascript
vue.js项目中实用的小技巧汇总
2017/11/29 Javascript
js实现黑白div块画空心的图形
2018/12/13 Javascript
微信小程序拼接图片链接无底洞深入探究
2019/09/03 Javascript
nodejs一个简单的文件服务器的创建方法
2019/09/13 NodeJs
VUE实现强制渲染,强制更新
2019/10/29 Javascript
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
Python实现模拟时钟代码推荐
2015/11/08 Python
python executemany的使用及注意事项
2017/03/13 Python
Python numpy.zero() 初始化矩阵实例
2019/11/27 Python
关于python3.9安装wordcloud出错的问题及解决办法
2020/11/02 Python
6种非常炫酷的CSS3按钮边框动画特效
2016/03/16 HTML / CSS
html5 Canvas实现图片旋转的示例
2018/01/15 HTML / CSS
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
英国办公家具网站:Furniture At Work
2019/10/07 全球购物
地球鞋加拿大官网:Earth Shoes Canada
2020/11/17 全球购物
办公室文员工作自我评价
2013/12/01 职场文书
学生会主席就职演讲稿
2014/01/14 职场文书
2014年上半年工作自我评价
2014/01/18 职场文书
高中地理教学反思
2014/01/29 职场文书
法人代表身份证明书及授权委托书
2014/09/16 职场文书
2015年毕业实习工作总结
2014/12/12 职场文书
nginx常用配置conf的示例代码详解
2022/03/21 Servers