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写法
Sep 15 Javascript
来自国外的14个图片放大编辑的jQuery插件整理
Oct 20 Javascript
Javascript图像处理—为矩阵添加常用方法
Dec 27 Javascript
JS定时刷新页面及跳转页面的方法
Jul 04 Javascript
node.js操作mysql(增删改查)
Jul 24 Javascript
JS简单实现禁止访问某个页面的方法
Sep 13 Javascript
js实现碰撞检测特效代码分享
Oct 16 Javascript
vue-cli中的webpack配置详解
Sep 25 Javascript
使用Node.js写一个代码生成器的方法步骤
May 10 Javascript
JavaScript实现星级评价效果
May 17 Javascript
仿照Element-ui实现一个简易的$message方法
Sep 14 Javascript
JS新手入门数组处理的实用方法汇总
Apr 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网站地图生成类示例
2014/01/13 PHP
php把时间戳转换成多少时间之前函数的实例
2016/11/16 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
php字符串截取函数mb_substr用法实例分析
2019/06/25 PHP
Extjs ajax同步请求时post方式参数发送方式
2009/08/05 Javascript
javascript动态添加表格数据行(ASP后台数据库保存例子)
2010/05/08 Javascript
为EasyUI的Tab标签添加右键菜单的方法
2012/07/14 Javascript
JavaScript中OnLoad几种使用方法
2012/12/15 Javascript
解决js下referer兼容各大浏览器的方法
2014/11/03 Javascript
javascript控制图片播放的实现代码
2020/07/29 Javascript
JavaScript实现文字跟随鼠标特效
2015/08/06 Javascript
js调用百度地图及调用百度地图的搜索功能
2015/09/07 Javascript
JS延时提示框实现方法详解
2015/11/26 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
2016/01/08 Javascript
AngularJS递归指令实现Tree View效果示例
2016/11/07 Javascript
使用Electron构建React+Webpack桌面应用的方法
2017/12/15 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
2018/09/29 Javascript
如何实现一个简易版的vuex持久化工具
2019/09/11 Javascript
JS实现可控制的进度条
2020/03/25 Javascript
vue实现匀速轮播效果
2020/06/29 Javascript
Python 网页解析HTMLParse的实例详解
2017/08/10 Python
解决Python print输出不换行没空格的问题
2018/11/14 Python
python微信好友数据分析详解
2018/11/19 Python
Python实现我的世界小游戏源代码
2021/03/02 Python
新秀丽官方旗舰店:Samsonite拉杆箱、双肩包、皮具
2018/03/05 全球购物
英国女性运动服品牌:Sweaty Betty
2018/11/08 全球购物
大学军训自我鉴定
2013/12/15 职场文书
污水厂厂长岗位职责
2014/01/04 职场文书
共产党员承诺书
2014/03/25 职场文书
抗洪救灾先进集体事迹材料
2014/05/26 职场文书
文明好少年事迹材料
2014/08/19 职场文书
上帝也疯狂观后感
2015/06/09 职场文书
2016习总书记系列重要讲话心得体会
2016/01/15 职场文书
高中历史教学反思
2016/02/19 职场文书
制定企业培训计划的五大要点!
2019/07/10 职场文书
React-vscode使用jsx语法的问题及解决方法
2021/06/21 Javascript