jquery.form.js是一个form插件，支持ajax表单提交和ajax上传。

　　使用时，需要在代码中添加如下：

<script src="http://malsup.github.io/jquery.form.js />

　　这里讲一下，使用jquery.form进行ajax表单上传。

//js示例

function example(){

        //定义ajax提交时的url等

	var option={

			url:"revise",

			method:"post",

			contentType:false,

			success:function(data){

				if(data=="1"){

					alert("上传成功!");

					$("#ff").resetForm(); //清空表单

				}else{

					alert("上传失败！");}

			},

	};
　　　　　//调用jquery.form的api ajaxSubmit进行上传，option为上面所编写的上传规定参数

	$("#ff").ajaxSubmit(option);  //ff为表单id

	return false;

}

　　使用jquery.form进行ajax表单提交时，如若对提交路径等有规定，则需要编写一个option对象，在option中过奖url等进行编写规定。最后则调用api ajaxSubmit进行表单上传。

　　上面为js部分，下面为h5部分

 <%@ page language="java" contentType="text/html; charset=UTF-8"

      pageEncoding="UTF-8"%>

  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

  <html>

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <title>jquery.form上传文件</title>

  </head>

  <body>

      <form id="ff">

  　　　　<input type="text"  name="name" />

  　　　　<input type="text"  name="age" />

         <input type="file" name="pic" id="pic"accept="image/png, image/jpeg, image/jpg"  />

  　　　　<button  type="button"  id="submitButton" value="确认" />

      </form>

 <script src="http://malsup.github.io/jquery.form.js"></script>

  <script type="text/javascript">

  $("#submitButton").click(function () { //按钮点击事件

  var option={

              url:"revise",

              method:"post",

              success:function(data){

                  if(data=="1"){

                      alert("上传成功!");

                     $("#ff").resetForm();

                      $("#add").html("");

                  }else{

                      alert("上传失败！");}             },

      };

      $("#ff").ajaxSubmit(option);

      return false;

  });

  </script>

  </body>

 </html>

　　表单内，需要上传的各个input标签必须要添加属性name，并正确命名。

　　使用jquery.form.js上传表单就是这样。

　　这是前段时间做项目时，使用常用ajax提交表单信息出错，查阅过资料后，个人总结出来的使用jquery.form.js的用法。

使用jquery-form进行文件上传的更多相关文章

  1. js 使用jquery.form.js文件上传

    1.文件上传,使用jquery.form.js插件库 <!DOCTYPE html> <html> <head> <meta charset="UT ...

  2. 转: 如何实现jQuery的Ajax文件上传

    [PHP文件上传] 在开始之前,我觉得是有必要把通WEB上传文件的原理简单说一下的.实际上,在这里不管是PHP,JSP,还是ASP处理上传的文件,其实都是WEB早已把文件上传到服务器了,我们只是运用上 ...

  3. 利用Formdata实现form提交文件上传不跳转页面

    作者:幻月九十链接:https://www.zhihu.com/question/19631256/answer/119911045来源:知乎著作权归作者所有,转载请联系作者获得授权. $('form ...

  4. jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能

     Ajax file upload plugin是一个功能强大的文件上传jQuery插件,可自定义链接.或其它元素庖代传统的file表单上传结果,可实现Ajax动态提示文件上传 过程,同时支撑多文 ...

  5. jquery组件WebUploader文件上传用法详解

    这篇文章主要为大家详细介绍了jquery组件WebUploader文件上传用法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 WebUploader是由Baidu WebFE(FEX)团队开发的一 ...

  6. 利用jquery.form实现异步上传文件

    实现原理 目前需要在一个页面实现多个地方调用上传控件上传文件,并且必须是异步上传.思考半天,想到通过创建动态表单包裹上传文件域,利用jquery.form实现异步提交表单,从而达到异步上传的目的,在上 ...

  7. 关于JQuery.form.js异步上传文件点滴

    好久没动代码了,前几天朋友委托我帮忙给做几个页面,其中有个注册带图片上传的页面.已之前的经验应该很快就能搞定,没想到的是搞了前后近一天时间.下面就说说异步上传的重要几个点,希望自己下次遇到此类问题的时 ...

  8. Javascript Fromdata 与jQuery 实现Ajax文件上传以及文件的删除

    前端HTML代码: <!DOCTYPE html> <html> <head> <title>ajax</title> <script ...

  9. Javascript Fromdata 与jQuery 实现Ajax文件上传

    <!DOCTYPE html> <html> <head> <title>ajax</title> <script type=&quo ...

  10. jQuery File Upload 文件上传插件使用一 (最小安装 基本版)

    jQuery File Upload 是一款非常强大的文件上传处理插件,支持多文件上传,拖拽上传,进度条,文件验证及图片音视频预览,跨域上传等等. 可以说你能想到的功能它都有.你没想到的功能它也有.. ...

随机推荐

  1. [内核驱动] miniFilter 内核层与应用程序通信

    转载:http://blog.csdn.net/heyabo/article/details/8721611 转载:http://www.cnblogs.com/ljinshuan/archive/2 ...

  2. You have new mail in /var/spool/mail/root

    centos7.5 查看邮件的方式: [root@web01 code]# yum -y install mailx #安装mailx [root@web01 code]# mail #执行mail命 ...

  3. selenium css定位方式

  4. 利用Selenium自动化测试android wap页

    http://blogs.360.cn/360qtest/2014/04/01/%E5%88%A9%E7%94%A8selenium%E8%87%AA%E5%8A%A8%E5%8C%96%E6%B5% ...

  5. AndroidO Treble架构下Hal进程启动及HIDL服务注册过程【转】

    本文转载自:https://blog.csdn.net/yangwen123/article/details/79854267 通过前面对Treble架构的介绍,我们知道,Android Framew ...

  6. P4822 [BJWC2012]冻结

    思路 和p4568类似的分层图最短路 从上一层向下一层连边权/2的边即可 代码 #include <cstdio> #include <algorithm> #include ...

  7. [jsp & thymeleaf] - jsp和thymeleaf的共存解析

    做项目时因为有些老jsp还需要测试用到,所以之前的thymeleaf也需要保持,配置如下: https://github.com/deadzq/jsp-thymeleaf 等空余时间在做详解吧!

  8. BZOJ 2002: [Hnoi2010]Bounce 弹飞绵羊（分块）

    http://www.lydsy.com/JudgeOnline/problem.php?id=2002 题意: 思路:不会LCT,就只好用分块了. 将这n个数分成根号n块,对于每一块中的每一个数,处 ...

  9. vue--v-model表单控件绑定

    原文链接:https://www.cnblogs.com/dyfbk/p/6868350.html v-model 指令在表单控件元素上创建双向数据绑定,下面一一进行示例解释. 1.v-model 双 ...

  10. P2512 [HAOI2008]糖果传递

    题目描述 有n个小朋友坐成一圈,每人有ai个糖果.每人只能给左右两人传递糖果.每人每次传递一个糖果代价为1. 输入输出格式 输入格式: 小朋友个数n 下面n行 ai 输出格式: 求使所有人获得均等糖果 ...