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 相关文章推荐
JavaScript在多浏览器下for循环的使用方法
Nov 07 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
Nov 28 Javascript
扩展JS Date对象时间格式化功能的小例子
Dec 02 Javascript
jQuery中:last-child选择器用法实例
Dec 31 Javascript
JavaScript 学习笔记之变量及其作用域
Jan 14 Javascript
jQuery实现表格颜色交替显示的方法
Mar 09 Javascript
JavaScript forEach()遍历函数使用及介绍
Jul 08 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
Mar 02 Javascript
jquery获取点击控件的绝对位置简单实例
Oct 13 Javascript
jquery——九宫格大转盘抽奖实例
Jan 16 Javascript
vue-router 路由基础的详解
Oct 17 Javascript
JS实现音乐钢琴特效
Jan 06 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
全国FM电台频率大全 - 18 湖南省
2020/03/11 无线电
Destoon实现多表查询示例
2014/08/21 PHP
WEB 浏览器兼容 推荐收藏
2010/05/14 Javascript
禁止拷贝网页内容的js代码
2014/01/22 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
简单谈谈JS数组中的indexOf方法
2016/10/13 Javascript
原生Javascript插件开发实践
2017/01/09 Javascript
用move.js库实现百叶窗特效
2017/02/08 Javascript
canvas绘制多边形
2017/02/24 Javascript
js鼠标跟随运动效果
2017/03/11 Javascript
gulp教程_从入门到项目中快速上手使用方法
2017/09/14 Javascript
ES6学习教程之模板字符串详解
2017/10/09 Javascript
使用proxy实现一个更优雅的vue【推荐】
2018/06/19 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
2018/07/03 Javascript
解决webpack dev-server不能匹配post请求的问题
2018/08/24 Javascript
vue.js中使用echarts实现数据动态刷新功能
2019/04/16 Javascript
利用Python中unittest实现简单的单元测试实例详解
2017/01/09 Python
使用Django2快速开发Web项目的详细步骤
2019/01/06 Python
python3通过selenium爬虫获取到dj商品的实例代码
2019/04/25 Python
python点击鼠标获取坐标(Graphics)
2019/08/10 Python
Pycharm中使用git进行合作开发的教程详解
2020/11/17 Python
使用Python爬取小姐姐图片(beautifulsoup法)
2021/02/11 Python
canvas仿写贝塞尔曲线的示例代码
2017/12/29 HTML / CSS
澳大利亚领先的在线机械五金、园艺和存储专家:Edisons
2018/03/24 全球购物
彪马土耳其官网:PUMA土耳其
2019/07/14 全球购物
买卖正宗运动鞋:GOAT
2019/12/06 全球购物
应届大学生自荐信格式
2013/09/21 职场文书
高等教育专业自荐信范文
2014/03/26 职场文书
新闻传媒系求职信范文
2014/04/19 职场文书
物流管理专业自荐信
2014/06/23 职场文书
《周恩来的四个昼夜》观后思想汇报范文两篇
2014/09/10 职场文书
师德师风事迹材料
2014/12/20 职场文书
小学生法制教育心得体会
2016/01/14 职场文书
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis
MySQL系列之十 MySQL事务隔离实现并发控制
2021/07/02 MySQL