首先需要引入jquery.form.js
之后即可使用


本示例为上传文件+form表单提交
使用的方法是提交地址写在form表单当中，在提交前进行检查工作，检查内容是否符合规范（是否为空），若为空则弹出提示信息，并不进行发送处理。
  1. <%--
    2. 

  2.   Created by IntelliJ IDEA.
    3. 

  3.   User: 水之笔记
    4. 

  4.   Date: 2017/3/9
    5. 

  5.   Time: 22:02
    6. 

  6.   To change this template use File | Settings | File Templates.
    7. 

  7. --%>
    8. 

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

  9. <html>
    10. 

  10. <head>
    11. 

  11.     <title>上传获奖作品</title>
    12. 

  12.     <script type="text/javascript" src="${pageContext.request.contextPath}/statics/js/jquery.js"></script>
    13. 

  13.     <script type="text/javascript" src="${pageContext.request.contextPath}/statics/js/is_null.js"></script>
    14. 

  14.     <script type="text/javascript" src="${pageContext.request.contextPath}/statics/js/jquery.form.js"></script>
    15. 

  15.     <script type="text/javascript" src="${pageContext.request.contextPath}/statics/js/competition_name.js"></script>
    16. 

  16.     <script type="text/javascript">
    17. 

  17.         $(document).ready(function () {
    18. 

  18.             $("#uploadForm").ajaxForm({
    19. 

  19.                 resetForm: true,
    20. 

  20.                 clearForm: true,
    21. 

  21.                 //定义返回JSON数据，还包括xml和script格式
    22. 

  22.                 dataType: 'json',
    23. 

  23. //                在发送之前进行的操作，如果有问题，返回false即可不会进行提交
    24. 

  24.                 beforeSend: function () {
    25. 

  25.                     //表单提交前做表单验证
    26. 

  26.                     if (isNull($("#name").val()) || isNull($("#year").val()) || $("#competition") == "请选择") {
    27. 

  27.                         alert("不能为空");
    28. 

  28.                         return false;
    29. 

  29.                     }
    30. 

  30.                     if ($("#file1").get(0).files[0] == null) {
    31. 

  31.                         alert("请至少上传源文件");
    32. 

  32.                         return false;
    33. 

  33.                     }
    34. 

  34.                     return true;
    35. 

  35.                 },
    36. 

  36.                 success: function (data) {
    37. 

  37.                     //提交成功后调用
    38. 

  38.                     alert(data.messageContent);
    39. 

  39.                     window.location.reload();
    40. 

    41. 

  41.                 }
    42. 

  42.             });
    43. 

  43.         });
    44. 

    45. 

  45.     </script>
    46. 

  46. </head>
    47. 

  47. <body>
    48. 

  48. <div>
    49. 

  49.     <form method="post" enctype="multipart/form-data" id="uploadForm"
    50. 

  50.           action="${pageContext.request.contextPath}/background/worksInsert">
    51. 

  51.         作品名称：<input type="text" name="name" id="name"><br>
    52. 

  52.         参赛年份：<input type="text" name="year" id="year"><br>
    53. 

  53.         参加竞赛：<select name="competition" id="competition">
    54. 

  54.         <option value="请选择">请选择</option>
    55. 

  55.     </select><br>
    56. 

  56.         源文件上传:<input type="file" name="file1" id="file1"><br>
    57. 

  57.         展示文件上传:<input type="file" name="file2" id="file2"><br>
    58. 

  58.         附件上传:<input type="file" name="file3" id="file3"><br>
    59. 

  59.         <input type="submit" value="提交">
    60. 

    61. 

  61.     </form>
    62. 

  62. </div>
    63. 

  63. </body>
    64. 

  64. </html>

jQuery.form的使用方法的更多相关文章

  1. jQuery.Form.js使用方法

    一.jQuery.Form.js 插件的作用是实现Ajax提交表单. 方法: 1.formSerilize() 用于序列化表单中的数据,并将其自动整理成适合AJAX异步请求的URL地址格式. 2.cl ...

  2. ajax上传图片 jquery插件 jquery.form.js 的方法 ajaxSubmit; AjaxForm与AjaxSubmit的差异

    先引入脚本  这里最好是把jquery的脚本升级到1.7 <script src="js/jquery-1.7.js" type="text/javascript& ...

  3. 如何理解jQuery中的ajaxSubmit方法

    版权声明:本文为博主原创文章,转载请标注:www.cnblogs.com/gdsblog 刚刚学习中,使用到了ajaxSubmit,犹豫以前没有接触㢧这个,所以刚开始是一脸懵逼状态,最后通过查找资料的 ...

  4. jQuery插件 -- Form表单插件jquery.form.js<转>

    jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmi ...

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

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

  6. jquery.form.js不能解决连接超时（timeout）的解决方法

    最近在使用jquery.form.js提交包含文件的表单时,碰到了一个问题:当碰上网速较慢时,而我们又设置了timeout时,例如: var options = { timeout: 3000 //限 ...

  7. jQuery form插件的使用--使用 fieldValue 方法校验表单

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  8. jquery.form.js实现将form提交转为ajax方式提交的使用方法

    本文实例讲述了jquery.form.js实现将form提交转为ajax方式提交的方法.分享给大家供大家参考.具体分析如下: 这个框架集合form提交.验证.上传的功能. 这个框架必须和jquery完 ...

  9. jquery.form.js用法之清空form的方法

    本段代码摘取自jquery.form.js中,由于觉得该方法的使用性非常强,同时也可独立拿出来使用.该段代码言简意赅可以很好的作为学习参考. /** * Clears the form data. T ...

随机推荐

  1. SQL SERVER CHARINDEX功能

    CHARINDEX功能经常用于通过在字符或字符串中的字符范围搜索. 假定被搜索的字符包括字符搜索,然后该函数返回一个非零整数,的字符在被搜索的字符中的開始位数.即CHARINDEX函数返回字符或者字符 ...

  2. HDU 1816， POJ 2723 Get Luffy Out（2-sat)

    HDU 1816, POJ 2723 Get Luffy Out pid=1816" target="_blank" style="">题目链接 ...

  3. Unity UGUI——Rect Transform包裹（Anchor Presets）

    Anchor Presets使用演示样品物业 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTXJfQUhhbw==/font/5a6L5L2T/fonts ...

  4. Cordova 代码热更新 - 简书

    原文:Cordova 代码热更新 - 简书 Cordova 代码热更新 [图片上传失败...(image-a19be7-1521624289049)] 基于 Cordova 框架能将网页应用 (js, ...

  5. C#MVC中创建多模块web应用程序

    当一个应用程序有越来越多的子模块后,应用程序将变得越来越大,复杂度也越来越高,应用程序也越来越难维护.如果把每个子模块,独立分成不同的web应用程序,则这个项目将易于维护.关于这个的好处,我也描述得不 ...

  6. windows远程函数不受支持

    输入 regedit打开注册表编辑器, 找目录\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Policies\System ...

  7. APP压力測试新手教程

    Daniel Knott 用过各种不同编程语言和软件质量保证工具.他在软件开发和測试方面干了七年,自2010年,他一直在德国汉堡的XING AG公司就职,几个项目里,比方XING调查和XING建议,他 ...

  8. Matlab Tricks（十五） —— 圆的正确画法

    使用参数方程, phi = 0:0.01:2*pi; x = cos(phi); y = sin(phi); axis equal plot(x, y) 根据参数方程,显然,圆心在 (0, 0),半径 ...

  9. Java编程思想学习笔记-使用显式的Lock对象

    若要保证后台线程在trylock()之前运行得到锁,可加“屏障”,如下1,2,3步,而trylock()不管设定时间与否都不会阻塞主线程而是立即返回: //: concurrency/AttemptL ...

  10. 新版本MenuDemo——使用Duilib模拟Windows本机菜单

    相信玩Duilib朋友已经开始期待一个很长的文章.由于我的文章在一周前公布--"无焦点窗体的实现"里面提到了无焦点窗体在菜单里面的应用,并承诺大家,写一个关于Menu实现的Demo ...