jQuery不使用插件及swf实现无刷新文件上传
更新时间：2014年12月08日 17:34:10 投稿：hebedich
这篇文章主要介绍了jQuery不使用插件及swf实现无刷新文件上传,需要的朋友可以参考下
文件上传是网站常用的功能，例如附件或图片的上传功能，解决方案也有很多，我们今天介绍一种通过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的内容。
相关文章
这篇文章主要介绍了JQuery中DOM加载与事件执行,实例分析了jQuery中DOM加载及事件执行的原理与实现方法,并补充说明了windows.onload方法和$(document).ready()方法的区别,需要的朋友可以参考下2015-06-06
这篇文章主要介绍了jQuery简单创建节点的方法,涉及jQuery获取节点及append添加元素创建节点的相关技巧,需要的朋友可以参考下2016-09-09
这篇文章主要介绍了jQuery简单获取DIV和A标签元素位置的方法,结合实例形式分析了jQuery针对页面div及A标签元素相关操作技巧,需要的朋友可以参考下2017-02-02
这篇文章主要内容是JQuery实现可编辑的表格实例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-09-09
本文主要是给大家分享了一则使用EasyUI实现同步树的代码，主要是使用递归实现，非常实用的方法，推荐给小伙伴们。2015-03-03
这篇文章主要为大家详细介绍了jquery实现百分比记分进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
本文主要介绍了jQuery实现Select下拉列表进行状态选择功能的代码。具有很好的参考价值，下面跟着小编一起来看下吧2017-03-03
这篇文章主要介绍了jQuery选择器源码解读（二）：select方法,本文用详细的注释解读了select方法的实现源码,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了jQuery纵向导航菜单效果实现方法,可实现类似淘宝首页纵向菜单的显示效果,涉及jQuery鼠标响应及页面元素属性动态操作相关技巧,需要的朋友可以参考下2016-12-12
判断某元素是否具备指定的样式的方法有很多，在接下来的文章中为大家介绍下jquery是如何做到的2013-11-11
最新评论