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代码必备[js多浏览器兼容写法]
Oct 29 Javascript
ExtJS 2.0实用简明教程之应用ExtJS
Apr 29 Javascript
JavaScript 输入框内容格式验证代码
Feb 11 Javascript
js弹窗代码 可以指定弹出间隔
Jul 03 Javascript
js过滤数组重复元素的方法
Sep 05 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
Dec 04 Javascript
Node.js程序中的本地文件操作用法小结
Mar 06 Javascript
Javascript中常用类型的格式化方法小结
Dec 26 Javascript
详解Node项目部署到云服务器上
Jul 12 Javascript
vue构建动态表单的方法示例
Sep 22 Javascript
Vue管理系统前端之组件拆分封装详解
Aug 23 Javascript
详解前端任务构建利器Gulp.js使用指南
Apr 30 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时间戳 strtotime()使用方法和技巧
2013/10/29 PHP
在PHP中使用redis
2013/11/04 PHP
php通过淘宝API查询IP地址归属等信息
2015/12/25 PHP
php arsort 数组降序排序详细介绍
2016/11/17 PHP
JS获取父节点方法
2009/08/20 Javascript
jquery ready函数源代码研究
2009/12/06 Javascript
关于Javascript模块化和命名空间管理的问题说明
2010/12/06 Javascript
js通过location.search来获取页面传来的参数
2014/09/11 Javascript
JavaScript中检查对象property的存在性方法介绍
2014/12/30 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
jquery实现图片上传之前预览的方法
2015/07/11 Javascript
Vuejs监听vuex中值的变化的方法示例
2018/12/02 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
2018/12/11 Javascript
Element-UI中关于table表格的那些骚操作(小结)
2019/08/15 Javascript
javascrpt密码强度校验函数详解
2020/03/18 Javascript
js实现双人五子棋小游戏
2020/05/28 Javascript
在Python的Flask框架下收发电子邮件的教程
2015/04/21 Python
Python 微信爬虫完整实例【单线程与多线程】
2019/07/06 Python
python matplotlib拟合直线的实现
2019/11/19 Python
Python3将jpg转为pdf文件的方法示例
2019/12/13 Python
python线程里哪种模块比较适合
2020/08/02 Python
纯CSS3制作漂亮带动画效果的主机价格表
2015/04/25 HTML / CSS
Lookfantastic意大利官网:英国知名美妆购物网站
2019/05/31 全球购物
酒店总经理工作职责
2013/12/13 职场文书
决心书范文
2014/03/11 职场文书
元旦联欢会策划方案
2014/06/11 职场文书
支部书记四风对照材料
2014/08/28 职场文书
2014年班级工作总结范文
2014/12/23 职场文书
迎新生欢迎词
2015/01/23 职场文书
师德师风个人总结
2015/02/06 职场文书
2015最新学生自我评价范文
2015/03/03 职场文书
MySQL索引是啥?不懂就问
2021/07/21 MySQL
OpenCV 图像梯度的实现方法
2021/07/25 Python
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python
vue如何清除浏览器历史栈
2022/05/25 Vue.js
Python使用Beautiful Soup(BS4)库解析HTML和XML
2022/06/05 Python