利用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插件Echarts实现的渐变色柱状图
Mar 23 jQuery
js和jquery中获取非行间样式
May 05 jQuery
jquery图片放大镜效果
Jun 23 jQuery
jQuery列表检索功能实现代码
Jul 17 jQuery
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
jquery实现楼层滚动效果
Jan 01 jQuery
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
jQuery实现简单飞机大战
Jul 05 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 已经成熟
2006/12/04 PHP
解析htaccess伪静态的规则
2013/06/18 PHP
php用户注册页面利用js进行表单验证具体实例
2013/10/17 PHP
php实现图片上传并利用ImageMagick生成缩略图
2016/03/14 PHP
贴一个在Mozilla中常用的Javascript代码
2007/01/09 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
运用jQuery定时器的原理实现banner图片切换
2014/10/22 Javascript
jquery实现选中单选按钮下拉伸缩效果
2015/08/06 Javascript
基于javascript实现动态显示当前系统时间
2016/01/28 Javascript
jQuery层次选择器用法示例
2016/09/09 Javascript
BootStrap中Table分页插件使用详解
2016/10/09 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
JS ES6中setTimeout函数的执行上下文示例
2017/04/27 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
2017/06/04 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
2017/08/16 Javascript
详解angular笔记路由之angular-router
2017/09/12 Javascript
Bootstrap模态对话框中显示动态内容的方法
2018/08/10 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
2019/07/03 jQuery
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
2020/04/27 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
2020/09/16 Javascript
使用python在校内发人人网状态(人人网看状态)
2014/02/19 Python
详细介绍Python函数中的默认参数
2015/03/30 Python
python实现发送邮件功能代码
2017/12/14 Python
对python中的for循环和range内置函数详解
2018/04/17 Python
python实现txt文件格式转换为arff格式
2018/05/31 Python
Python基于递归算法求最小公倍数和最大公约数示例
2018/07/27 Python
解决python opencv无法显示图片的问题
2018/10/28 Python
numpy给array增加维度np.newaxis的实例
2018/11/01 Python
Python魔法方法功能与用法简介
2019/04/04 Python
Pytorch使用MNIST数据集实现基础GAN和DCGAN详解
2020/01/10 Python
关于CSS Tooltips(鼠标经过时显示)的效果
2013/04/10 HTML / CSS
New Era英国官网:美国棒球帽品牌
2018/03/21 全球购物
Vivo俄罗斯官方在线商店:中国智能手机品牌
2019/10/04 全球购物
c++工程师面试问题
2013/08/04 面试题
运动会领导邀请函
2014/02/05 职场文书
MySQL空间数据存储及函数
2021/09/25 MySQL