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. QT5下的caffe项目属性

    TEMPLATE = app CONFIG += console c++11 CONFIG -= app_bundle CONFIG -= qt SOURCES += /home/aimhabo/ca ...

  2. Linux电源管理（五）thermal【转】

    本文转载自:https://blog.csdn.net/zhouhuacai/article/details/78172267 版权声明:本文为博主原创文章,未经博主允许不得转载.    https: ...

  3. sqlitestudio

    SQLite数据库的特性 特点: 1.轻量级2.独立性,没有依赖,无需安装3.隔离性 全部在一个文件夹系统4.跨平台 支持众多操作系统5.多语言接口 支持众多编程语言6.安全性 事物,通过独占性和共享 ...

  4. Docker 搭建Spark 依赖singularities/spark:2.2镜像

    singularities/spark:2.2版本中 Hadoop版本:2.8.2 Spark版本: 2.2.1 Scala版本:2.11.8 Java版本:1.8.0_151 拉取镜像: [root ...

  5. 解决Win10 Git图标不显示问题

    升级系统到win10 1803版本以后发现TortoiseGit的忽略图标不显示了 开始以为是版本问题,将TortoiseGit版本进行了升级还是不行 网上查找以后发现 Windows Explore ...

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

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

  7. 深度学习课程笔记（十）Q-learning (Continuous Action)

    深度学习课程笔记(十)Q-learning (Continuous Action) 2018-07-10 22:40:28 reference:https://www.youtube.com/watc ...

  8. 自定义Exception：MVC抛出自定义异常，并以Json方式返回

    相关链接 优点: 可以统一处理所有页面的异常,对所有需要返回json数据的异常,都用同样的方法throw new DVMException().页面展示,controller的错误处理方式一样 节省编 ...

  9. algorithm.sty not found error in LaTeX 解决方法

    参考: algorithm.sty not found error in LaTeX algorithm.sty not found error in LaTeX 解决方法 错误日志: LaTeX E ...

  10. P1230 智力大冲浪

    题目描述 小伟报名参加中央电视台的智力大冲浪节目.本次挑战赛吸引了众多参赛者,主持人为了表彰大家的勇气,先奖励每个参赛者m元.先不要太高兴!因为这些钱还不一定都是你的?!接下来主持人宣布了比赛规则: ...