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. day24,25组合 封装 多态

    面向对象的精髓:将数据和处理数据的代码绑定成一个对象 只要获取到对象相应的数据和方法都有了 一.组合 什么叫组合? 多个对象放在一起叫组合 组合的作用也是降低代码的冗余 # 学生会增加各种各样的新的属 ...

  2. batchGetAnchorLevel（dubbo接口）

    一.编写脚本前的准备工作 1.安装idea,安装本地maven库,并在idea里面配置maven 2.导入git源码(目的在于下载所依赖的基础包)-->File-new-Project from ...

  3. Ubuntu18.04 一些好用的扩展

    原文:https://www.lulinux.com/archives/2589 一些好用的扩展: United:https://www.gnome-look.org/p/1167950/ dynam ...

  4. P2042 [NOI2005]维护数列

    思路 超级恶心的pushdown 昏天黑地的调 让我想起了我那前几个月的线段树2 错误 这恶心的一道题终于过了 太多错误,简直说不过来 pushup pushdown 主要就是这俩不太清晰,乱push ...

  5. 论文笔记：Learning Dynamic Memory Networks for Object Tracking

    Learning Dynamic Memory Networks for Object Tracking  ECCV 2018Updated on 2018-08-05 16:36:30 Paper: ...

  6. java 偏向锁,轻量锁,重量级锁

    synchronized的执行过程: 1. 检测Mark Word里面是不是当前线程的ID,如果是,表示当前线程处于偏向锁 2. 如果不是,则使用CAS将当前线程的ID替换Mard Word,如果成功 ...

  7. kubernetes 实战4_命令_Configure Pods and Containers

    Configure Service Accounts for Pods A service account provides an identity for processes that run in ...

  8. python时间

    #!/usr/bin/python # -*- coding: utf-8 -*- import sys import time import datetime line="Wed 11/2 ...

  9. 数据库中清空数据，保留表结构的sql语句

    方法一:Delete Form 表名 方法二:TRUNCATE TABLE 在功能上与不带 WHERE 子句的 DELETE 语句相同:二者均删除表中的全部行.但 TRUNCATE TABLE 比 D ...

  10. 从命令行git转到Tortoise

    阅读前请注意:本文先学命令行git的,但过不久遇到乱码问题久久不能解决,最后转向tgit. 2016-29 安装 next 下一步 设置目录 勾选需要的项: Additional icons是关于图标 ...