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 相关文章推荐
jQuery 全选/反选以及单击行改变背景色实例
Jul 02 Javascript
Node.js模块加载详解
Aug 16 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
Aug 20 Javascript
jquery判断至少有一个checkbox被选中的方法
Jun 05 Javascript
javascript图片预加载实例分析
Jul 16 Javascript
jQuery实现的自定义弹出层效果实例详解
Sep 04 Javascript
微信小程序 wx.request(object) API详解及实例代码
Sep 30 Javascript
select下拉框插件jquery.editable-select详解
Jan 22 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
JavaScript实现随机点名程序
Mar 25 Javascript
js实现双人五子棋小游戏
May 28 Javascript
JavaScript实现五子棋小游戏
Oct 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
PHP下利用header()函数设置浏览器缓存的代码
2010/09/01 PHP
PHP函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
2011/07/01 PHP
PHP求小于1000的所有水仙花数的代码
2012/01/10 PHP
php在程序中将网页生成word文档并提供下载的代码
2012/10/09 PHP
php中debug_backtrace、debug_print_backtrace和匿名函数用法实例
2014/12/01 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
ThinkPHP3.2.2实现持久登录(记住我)功能的方法
2016/05/16 PHP
PHP实现cookie跨域session共享的方法分析
2019/08/23 PHP
php ZipArchive实现多文件打包下载实例
2019/10/31 PHP
PHP预定义接口――Iterator用法示例
2020/06/05 PHP
最近项目写了一些js,水平有待提高
2009/01/31 Javascript
json 实例详细说明教程
2009/10/31 Javascript
js创建对象的几种常用方式小结(推荐)
2010/10/24 Javascript
深入理解javascript构造函数和原型对象
2014/09/23 Javascript
javascript学习笔记(五)原型和原型链详解
2014/10/08 Javascript
JavaScript中的数组特性介绍
2014/12/30 Javascript
jQuery中hover与mouseover和mouseout的区别分析
2015/12/24 Javascript
浅谈js的url解析函数封装
2016/06/28 Javascript
基于Vuejs实现购物车功能
2016/08/02 Javascript
Vue.js框架路由使用方法实例详解
2017/08/25 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
2017/11/27 Javascript
JS同步、异步、延迟加载的方法
2018/05/05 Javascript
微信网页授权并获取用户信息的方法
2018/07/30 Javascript
浅析vue-router中params和query的区别
2019/12/24 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
2020/07/24 Javascript
Python获取远程文件大小的函数代码分享
2014/05/13 Python
Python读写Excel文件方法介绍
2014/11/22 Python
Python如何实现文本转语音
2016/08/08 Python
python实现学生信息管理系统
2020/04/05 Python
造价工程师个人求职信
2013/09/21 职场文书
学生学习总结的自我评价
2013/10/22 职场文书
乡镇信息公开实施方案
2014/03/23 职场文书
说明书格式及范文
2014/05/07 职场文书
2014年教师思想工作总结
2014/12/03 职场文书
2014年应急工作总结
2014/12/11 职场文书
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL