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. HTTP协议和XMPP协议、MQTT协议

    应用层协议:每个应用层的都是为了解决某一类应用问题.而问题的解决又必须通过位于不同主机中的多个应用进程之间的通信和协同工作来完成.应用进程之间必须遵守严格的规则.应用层协议应当定义如下几个: 应用进程 ...

  2. Python3 tkinter基础 Canvas background 创建白色的画布 create_line width 画宽的线

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  3. Python3 tkinter基础 Button text,fg 按钮上显示的文字 文字的颜色

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  4. eMMC之分区管理、总线协议和工作模式【转】

    本文转载自:https://blog.csdn.net/u013686019/article/details/66472291 一.eMMC 简介 eMMC 是 embedded MultiMedia ...

  5. upc组队赛1 黑暗意志【stl-map】

    黑暗意志 题目描述 在数千年前潘达利亚从卡利姆多分离之时,迷雾笼罩着这块新形成的大陆,使它不被外来者发现.迷雾同样遮蔽着这片大陆古老邪恶的要塞--雷神的雷电王座.在雷神统治时期,他的要塞就是雷电之王力 ...

  6. tp框架中的一些疑点知识-5

    关于vim中的缓存区的前后bp和bn的界定 通过命令ls可以看到 缓存区的 排序. 最开始打开的文件排在最上面, 序号最小. 那么它们就是 更 前 的缓冲区. 序号更前的用bp, 序号靠后的用bn. ...

  7. L2-001：dijskstra + 多条最短路径 + 记录中间路径

    题目链接:https://pintia.cn/problem-sets/994805046380707840/problems/994805073643683840 思路: dijkstra算出最短路 ...

  8. ZOJ 3829 Known Notation（贪心）题解

    题意:给一串字符,问你最少几步能变成后缀表达式.后缀表达式定义为,1 * 1 = 1 1 *,题目所给出的字串不带空格.你可以进行两种操作:加数字,交换任意两个字符. 思路:(不)显然,最终结果数字比 ...

  9. 笔记本电脑切换到无线热点无法联网问题&Spring Cloud相关工程启动报错问题

    通过禁用本地网络,和禁用另一个无线网络,以及禁用后重开,修改密码,重连的方式均失败后, 使用IE浏览器浏览提示失败,点击诊断,诊断出DNS服务器无响应异常. 突然想到通过ipconfig查看ip,网关 ...

  10. Java 字符串拆分（拆分字符串）

    String sourceStr = "1,2,3,4,5"; String[] sourceStrArray = sourceStr.split(","); ...