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渐显(fadeIn)渐隐(fadeOut)类
Jun 19 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
Jul 17 Javascript
JavaScript使用replace函数替换字符串的方法
Apr 06 Javascript
javascript实现Table排序的方法
May 15 Javascript
JS函数定义方式的区别介绍
Mar 22 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
Jul 11 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
Aug 29 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
Oct 27 Javascript
Vue3.0结合bootstrap创建多页面应用
May 28 Javascript
Vue Extends 扩展选项用法完整实例
Sep 17 Javascript
js实现随机圆与矩形功能
Oct 29 Javascript
Javascript生成器(Generator)的介绍与使用
Jan 31 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+ajax实现的点击浏览量加1
2015/04/16 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
Javascript MD4
2006/12/20 Javascript
javascript div 遮罩层封锁整个页面
2009/07/10 Javascript
jQuery实现切换页面布局使用介绍
2011/10/09 Javascript
Jquery中val()表单取值赋值的实例代码
2013/08/15 Javascript
JS网页播放声音实现代码兼容各种浏览器
2013/09/22 Javascript
js如何设置在iframe框架中指定div不显示
2013/12/04 Javascript
js读取配置文件自写
2014/02/11 Javascript
jquery中 $.expr使用实例介绍
2014/06/09 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
2015/11/15 Javascript
js点击任意区域弹出层消失实现代码
2016/12/27 Javascript
js按条件生成随机json:randomjson实现方法
2017/04/07 Javascript
微信小程序Getuserinfo解决方案图解
2018/08/24 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
2020/02/19 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
2021/02/05 Javascript
[06:43]DAC2018 4.5 SOLO赛 Maybe vs Paparazi
2018/04/06 DOTA
Python如何抓取天猫商品详细信息及交易记录
2018/02/23 Python
python+unittest+requests实现接口自动化的方法
2018/11/29 Python
pyhanlp安装介绍和简单应用
2019/02/22 Python
python 中pyqt5 树节点点击实现多窗口切换问题
2019/07/04 Python
python GUI库图形界面开发之PyQt5信号与槽机制、自定义信号基础介绍
2020/02/25 Python
用python对excel进行操作(读,写,修改)
2020/12/25 Python
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
最新大学职业规划书范文
2013/12/30 职场文书
合作意向协议书范本
2014/03/31 职场文书
开展创先争优活动总结
2014/08/28 职场文书
健康状况证明模板
2014/10/23 职场文书
交警失职检讨书
2015/01/26 职场文书
商务邀请函
2015/01/30 职场文书
销售员自我评价
2015/03/11 职场文书
教师岗位职责范本
2015/04/02 职场文书
党支部鉴定意见
2015/06/02 职场文书
Redis Cluster集群动态扩容的实现
2021/07/15 Redis
详解nginx安装过程并代理下载服务器文件
2022/02/12 Servers