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. 学习Struts2的个人疑惑及问题解决

    刚开始学习SSH框架中Struts2时,个人疑惑以及一些问题总结一下. 1.package节点namespace属性值决定访问路径问题       namespace不写或写namespace=&qu ...

  2. ImageView控件有关问题

    了解了一下ImageView控件,这个控件本身及其属性倒没有什么特别之处.只是在看<第一行代码>时,郭大神写到创建drawable-xhdpi文件有些问题,首先先说drawable和mip ...

  3. shell中使用echo输出时如何指定颜色

    答: 请看下图:

  4. HDU 4632 Palindrome subsequence & FJUT3681 回文子序列种类数（回文子序列个数/回文子序列种数 容斥 + 区间DP）题解

    题意1:问你一个串有几个不连续子序列(相同字母不同位置视为两个) 题意2:问你一个串有几种不连续子序列(相同字母不同位置视为一个,空串视为一个子序列) 思路1:由容斥可知当两个边界字母相同时 dp[i ...

  5. [bzoj 4034][HAOI 2015]树上操作

    Description 有一棵点数为 N 的树,以点 1 为根,且树点有边权.然后有 M 个 操作,分为三种: 操作 1 :把某个节点 x 的点权增加 a . 操作 2 :把某个节点 x 为根的子树中 ...

  6. 深度学习课程笔记（四）Gradient Descent 梯度下降算法

    深度学习课程笔记(四)Gradient Descent 梯度下降算法 2017.10.06 材料来自:http://speech.ee.ntu.edu.tw/~tlkagk/courses_MLDS1 ...

  7. Images之Dockerfiles

    Best practices for writing Dockerfiles This document covers recommended best practices and methods f ...

  8. StringBuilder的三种删除方法比较

    分别用一千万次循环来比较StringBuilder的三种删除方法所用时间 未避免偶然性,再循环一百次来比较总时间 --主类 public class StringBuilderRemove { pub ...

  9. 【Python】【有趣的模块】【Requests】session & cookie

    保存http请求的状态(请求的上下文) [区别&联系] 1. cookie保存在客户端的浏览器,比如标识是哪个请求者.购物车应用等 session保存在服务端,http连接时无则创建,有则用现 ...

  10. _itemmod_extract_enchant随机附魔提取

    技能 脚本 spell_extract_enchant 提取一条随机FM 随机FM提取 物品脚本:1.spell_extract_enchant 提取一条随机FM2.spell_extract_enc ...