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 中的replace方法说明
Apr 13 Javascript
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
Jun 04 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
Feb 23 Javascript
jquery.post用法示例代码
Jan 03 Javascript
javascript使用数组的push方法完成快速排序
Sep 15 Javascript
JavaScript版的TwoQueues缓存模型
Dec 29 Javascript
jquery滚动加载数据的方法
Mar 09 Javascript
javascript学习总结之js使用技巧
Sep 02 Javascript
AngularJS基础 ng-model-options 指令简单示例
Aug 02 Javascript
JS实现区分中英文并统计字符个数的方法示例
Jun 09 Javascript
vue项目中使用tinymce编辑器的步骤详解
Sep 11 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
Nov 07 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&amp;MYSQL分页原理及实现
2007/01/02 PHP
PHP图片库imagemagick安装方法
2014/09/23 PHP
PHP将数据导出Excel表中的实例(投机型)
2017/07/31 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
2019/03/30 PHP
JS 继承实例分析
2008/11/04 Javascript
jQuery 白痴级入门教程
2009/11/11 Javascript
jquery如何判断表格同一列不同行input数据是否重复
2014/05/14 Javascript
jquery中each遍历对象和数组示例
2014/08/05 Javascript
jQuery元素的隐藏与显示实例
2015/01/20 Javascript
JavaScript中用于生成随机数的Math.random()方法
2015/06/15 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
2016/01/07 Javascript
JavaScript隐式类型转换
2016/03/15 Javascript
js制作可以延时消失的菜单
2017/01/13 Javascript
js实现数组和对象的深浅拷贝
2017/09/30 Javascript
Vue单页应用引用单独的样式文件的两种方式
2018/03/30 Javascript
JavaScript定时器设置、使用与倒计时案例详解
2019/07/08 Javascript
使用apifm-wxapi模块中的问题及解决方法
2019/08/05 Javascript
解决Antd Table表头加Icon和气泡提示的坑
2020/11/17 Javascript
用实例说明python的*args和**kwargs用法
2013/11/01 Python
Python语言生成水仙花数代码示例
2017/12/18 Python
Python3单行定义多个变量或赋值方法
2018/07/12 Python
Python子类继承父类构造函数详解
2019/02/19 Python
python flask安装和命令详解
2019/04/02 Python
python使用BeautifulSoup与正则表达式爬取时光网不同地区top100电影并对比
2019/04/15 Python
sklearn的predict_proba使用说明
2020/06/28 Python
Ubuntu16安装Python3.9的实现步骤
2020/12/15 Python
蛋白质世界:Protein World
2017/11/23 全球购物
The Hut英国:英国领先的豪华在线百货商店
2019/07/26 全球购物
教师实习的自我鉴定
2013/10/26 职场文书
股权转让协议书范本
2014/04/12 职场文书
物理分数没达标检讨书
2014/09/13 职场文书
档案接收函格式
2015/01/30 职场文书
结婚喜宴迎宾词
2015/08/10 职场文书
开发一个封装iframe的vue组件
2021/03/29 Vue.js
JPA如何使用entityManager执行SQL并指定返回类型
2021/06/15 Java/Android
讲解MySQL增删改操作
2022/05/06 MySQL