利用jQuery异步上传文件的插件用法详解


Posted in jQuery onJuly 19, 2017

现在想实现用ajax来上传文件的功能,但是却发现Jquery自带的ajax方法只能上传文件名,而不能上传文件;用form提交虽然能够上传文件,但是却要刷新页面。。。多方查找下找到了一个可用的jQuery插件,刚好可以满足异步上传文件的要求。

代码

jquery.form.js

用法

这个插件是基于表单提交的,我们只要正常的写一段提交文件的表单,如:

<form id="myForm" action="comment.php" method="post" enctype="multipart/form-data">
  <input type="file" name="name" />
  <input type="submit" value="Submit Comment" />
</form>

然后在js中加上如下代码:

<html>
<head>
  <script src="jquery.js"></script>
  <script src="jquery.form.js"></script>
  <script>
    $(document).ready(function() {
      $('#myForm').ajaxForm(function(data) {
        alert(data);
      });
    });
  </script>
</head>

这样就可以监听表单的提交事件,把它变成ajax传送到后台,然后将后台返回的信息从data中获取。如此一来就可以用ajax通信来传输文件了。

以上所述是小编给大家介绍的利用jQuery异步上传文件的插件用法详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
简单实现jQuery轮播效果
Aug 18 jQuery
使用jQuery实现简单的tab框实例
Aug 22 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
使vue实现jQuery调用的两种方法
May 12 jQuery
jQuery插件实现图片轮播效果
Oct 19 jQuery
jquery实现图片放大镜效果
Dec 23 jQuery
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 #jQuery
jquery版轮播图效果和extend扩展
Jul 18 #jQuery
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 #jQuery
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 #jQuery
jQuery remove()过滤被删除的元素(推荐)
Jul 18 #jQuery
jQuery之动画ajax事件(实例讲解)
Jul 18 #jQuery
详解jQuery中关于Ajax的几个常用的函数
Jul 17 #jQuery
You might like
php 运行效率总结(提示程序速度)
2009/11/26 PHP
《PHP编程最快明白》第二讲 数字、浮点、布尔型、字符串和数组
2010/11/01 PHP
php插入中文到sqlserver 2008里出现乱码的解决办法分享
2012/07/19 PHP
PHP5各个版本的新功能和新特性总结
2014/03/16 PHP
php修改文件上传限制方法汇总
2015/04/07 PHP
php编写简单的文章发布程序
2015/06/18 PHP
Zend Framework框架实现类似Google搜索分页效果
2016/11/25 PHP
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
2011/04/06 Javascript
js 自制滚动条的小例子
2013/03/16 Javascript
JQuery写动态树示例代码
2013/07/31 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
2014/08/12 Javascript
jQuery搜索同辈元素方法
2015/02/10 Javascript
js实现选中页面文字将其分享到新浪微博
2015/11/05 Javascript
JavaScript自定义分页样式
2017/01/17 Javascript
详解使用webpack打包编写一个vue-toast插件
2017/11/08 Javascript
简述JS控制台的使用
2018/07/15 Javascript
微信小程序动态增加按钮组件
2018/09/14 Javascript
详解webpack打包后如何调试的方法步骤
2018/11/07 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
2018/12/24 Javascript
Vue通过WebSocket建立长连接的实现代码
2019/11/05 Javascript
解决python2.7用pip安装包时出现错误的问题
2017/01/23 Python
分享一个可以生成各种进制格式IP的小工具实例代码
2017/07/28 Python
K-means聚类算法介绍与利用python实现的代码示例
2017/11/13 Python
python列表的增删改查实例代码
2018/01/30 Python
python实现手机通讯录搜索功能
2018/02/22 Python
Omio法国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/13 全球购物
美国五金商店:Ace Hardware
2018/03/27 全球购物
shell变量的作用空间是什么
2013/08/17 面试题
商场消防演习方案
2014/02/12 职场文书
2014年母亲节寄语
2014/05/07 职场文书
新学期开学演讲稿
2014/05/24 职场文书
电气工程及其自动化专业毕业生自荐信
2014/06/21 职场文书
离婚协议书范本
2015/01/26 职场文书
Mysql关于数据库是否应该使用外键约束详解说明
2021/10/24 MySQL
java代码实现空间切割
2022/01/18 Java/Android
MySQL分区路径子分区再分区
2022/04/13 MySQL