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 阻止javascript事件冒泡,获取控件ID值
Jun 27 Javascript
JavaScript支持的最大递归调用次数分析
Jun 24 Javascript
jQuery实现dialog设置focus焦点的方法
Jun 10 Javascript
JQuery datepicker 用法详解
Dec 25 Javascript
基于jQuery实现点击弹出层实例代码
Jan 01 Javascript
jQuery事件绑定on()与弹窗实现代码
Apr 28 Javascript
Node.js Addons翻译(C/C++扩展)
Jun 12 Javascript
JS+CSS实现下拉刷新/上拉加载插件
Mar 31 Javascript
详解vue2路由vue-router配置(懒加载)
Apr 08 Javascript
15个顶级开源JavaScript框架和库
Oct 10 Javascript
Vue.js 中的 v-cloak 指令及使用详解
Nov 19 Javascript
JS数组去重的6种方法完整实例
Dec 08 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获取文件名后缀常用方法小结
2015/02/24 PHP
Laravel实现搜索的时候分页并携带参数
2019/10/15 PHP
jQuery使用手册之三 CSS操作
2007/03/24 Javascript
JS解密入门 最终变量劫持
2008/06/25 Javascript
jQuery EasyUI API 中文文档 - Pagination分页
2011/09/29 Javascript
五段实用的js高级技巧
2011/12/20 Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
2015/05/25 Javascript
jQuery中的基本选择器用法学习教程
2016/04/14 Javascript
js判断节假日实例代码
2017/12/27 Javascript
图片文字识别(OCR)插件Ocrad.js教程
2018/11/26 Javascript
微信小程序分享海报生成的实现方法
2018/12/10 Javascript
vue强制刷新组件的方法示例
2019/02/28 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
2019/04/15 Javascript
解决vue 子组件修改父组件传来的props值报错问题
2019/11/09 Javascript
Vue程序化的事件监听器(实例方案详解)
2020/01/07 Javascript
有趣的JavaScript隐式类型转换操作实例分析
2020/05/02 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
2020/06/11 Javascript
Python实现对比不同字体中的同一字符的显示效果
2015/04/23 Python
python安装mysql-python简明笔记(ubuntu环境)
2016/06/25 Python
Python算术运算符实例详解
2017/05/31 Python
Python数据库小程序源代码
2019/09/15 Python
python3中datetime库,time库以及pandas中的时间函数区别与详解
2020/04/16 Python
python的链表基础知识点
2020/09/13 Python
pycharm中leetcode插件使用图文详解
2020/12/07 Python
python 实现ping测试延迟的两种方法
2020/12/10 Python
澳大利亚领先的在线美容商店:Facial Co
2017/10/22 全球购物
介绍一下Linux内核的排队自旋锁
2014/08/27 面试题
会计自我鉴定
2013/11/02 职场文书
幼儿园小班评语
2014/04/18 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
四风对照检查材料思想汇报
2014/09/20 职场文书
2014年卫生监督工作总结
2014/12/09 职场文书
团员年度个人总结
2015/02/26 职场文书
银行优秀员工推荐信
2015/03/24 职场文书
Nginx配置之实现多台服务器负载均衡
2021/08/02 Servers
前端canvas中物体边框和控制点的实现示例
2022/08/05 Javascript