广播： 关注微信公众号“jQuery每日经典”，有更多资料。微信小程序 -- 前端技术API手册 也在公众号首次发布。有需要的联系公众号中QQ。

　　距离上一篇 文件上传下载样式 -- bootstrap（http://www.cnblogs.com/thomascui/p/5370947.html）已经三周时间了，期间一直考虑怎么样给大家提交一篇完美的逻辑处理功能。现在我结合自己的实际工作给大家分享一下。

使用的技术有jquery.form.js框架， 以及springmvc框架。主要实现异步文件上传的同时封装对象，以及一些注意事项。

功能本身是很简单的，但是涉及到一些传递参数类型的问题。例如：jquery的ajax方法与jquery.form.js中的ajaxSubmit方法的参数，具体细节将在下一篇博客中分享。

重点： html表格三要素： action="fileUpload/fileUpload" method="post" enctype="multipart/form-data";

1. 最简单的表单直接提交

html代码：

<body>

    <form action="fileUpload/fileUpload" method="post" enctype="multipart/form-data">

    <input type="text" name="password">

     <input type="file" name="file">

    <input type="text" name="username">

        <input type="submit" value="submit">

    </form>

  <button id="button">提交</button>

</body>

java代码（具体的springmvc配置，包括文件上传的配置参考博客http://www.cnblogs.com/xiandedanteng/p/4122770.html ）

@Controller

@RequestMapping("/fileUpload")

public class FileUpload {

  @RequestMapping("/fileUpload")

  @ResponseBody

  public String FileUpload1(@RequestParam("file")MultipartFile file/*, @RequestParam("username")String username*/){

    System.out.println("------------------------------- "+ file.getSize());

    if(!file.isEmpty()){

      System.out.println("Process file: "+file.getOriginalFilename() );

      try {

        FileUtils.copyInputStreamToFile(file.getInputStream(), new File("c:\\temp\\imooc\\", System.currentTimeMillis()+ file.getOriginalFilename()));

      } catch (IOException e) {

        e.printStackTrace();

      }

    }

    return "NewFile";

  }

}

2. 使用jquery.form.js的ajaxSubmit方法

html代码以及java代码保持不变，给id=button的按钮添加事件

$("#button").click(function(){

      var hideForm = $('form');

        var options = {

            dataType : "json",

            /*data: {'file': $("input[type=file]").val(), "username": '123', password: "123"},*/

            beforeSubmit : function() {

                alert("正在上传");

            },

            success : function(result) {

                alert('成功上传！');  

            },

            error : function(result) {  

            }

        };

        hideForm.ajaxSubmit(options);

    });

3. 在后台使用一个User对象接收username和password。

<form action="fileUpload/fileUpload" method="post" enctype="multipart/form-data">

     <input type="file" name="file">

        <input type="submit" value="submit">

    </form>

有可能你会按照下面的步骤做： 封装表单数据作为一个json对象， 给上面的js代码添加data

data:{'file': $("input[type=file]").val(), 'user':{"username": '123', password: "123"}}

在此处其实是画蛇添足，这种情况下发送的请求的详细情况如图：

此时页面会报错415。

----------------------------------------------------------------

最合理的代码应该是：html代码与1相同， js代码与2相同， java代码

public String FileUpload1(@RequestParam("file")MultipartFile file, User user){

而且User、前面不能加@RequestBody.。

具体的原因会在下一篇博客中分享，大家及时关注。

如果有什么纰漏或者有改进的地方大家及时评论，会及时修改文章。

文件上传功能 -- jquery.form.js/springmvc的更多相关文章

  1. 文件上传时jquery.form.js中提示form.submit SCRIPT5: 拒绝访问

    利用其它控件触发file的click事件来选择文件后,使用jquery.form.js中的submit方法提交时IE报错:form.submit SCRIPT5: 拒绝访问,其它浏览器正常, < ...

  2. 文件/大文件上传功能实现（JS+PHP）全过程

    文件/大文件上传功能实现(JS+PHP) 参考博文:掘金-橙红年代 前端大文件上传 路漫漫 其修远 PHP + JS 实现大文件分割上传 本文是学习文件上传后的学习总结文章,从无到有实现文件上传功能, ...

  3. JQuery文件上传插件JQuery.upload.js的用法简介

    JQuery文件上传插件,这个插件很小,用法很简单,效果却很棒.注意:JQuery版本要求1.8及以上,大家执行如果没效果,则检查JQuery版本,如果是1.8及以上,则该插件源码中的.size()需 ...

  4. 使用jquery.form.js文件进行文件上传

    本想着文件上传是一件挺简单的事,不过是获取文件地址保存到服务器而已,然而事实并非如此. 我信心满满的写下input type="file",alert input 的value,打 ...

  5. js 使用jquery.form.js文件上传

    1.文件上传,使用jquery.form.js插件库 <!DOCTYPE html> <html> <head> <meta charset="UT ...

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

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

  7. jquery.form.js官方插件介绍Form插件，支持Ajax，支持Ajax文件上传

    jquery.form.js官方插件介绍Form插件,支持Ajax,支持Ajax文件上传 http://www.malsup.com/jquery/form/#getting-started [JQu ...

  8. jquery.form.js ajax提交上传文件

    项目中最近有用到表单提交,是带有图片上传的表单录入,需要ajax异步提交,网上找了好多例子都是只能提交上传字段一个信息的,这里整理一下.表单里有普通文本信息字段也有图片上传字段. 1.jsp代码--引 ...

  9. 使用jquery.form.js提交表单上传文件

    方法: 1.formSerilize()  用于序列化表单中的数据,并将其自动整理成适合AJAX异步请求的URL地址格式. 2.clearForm()   清除表单中所有输入值的内容. 3.restF ...

随机推荐

  1. dropdownlist控件的几个属性selectedIndex、selectedItem、selectedValue、selectedItem.Text、selectedItem.value的区别

    转自http://blog.csdn.net/iqv520/article/details/4419186 1. selectedIndex——指的是dropdownlist中选项的索引,为int,从 ...

  2. 如何使用win7自带的备份还原以及创建系统镜像------傻瓜式教程

    对于经常鼓捣电脑的童鞋来说,装系统是一件极其平常的事情,不过系统装多了之后,我们会感到比较烦躁,因为每一次装系统意味着驱动的重新安装,程序的重新安装,每次这么鼓捣几次,半天时间就花在这上面了,效率是在 ...

  3. Cortex-M3学习日志（一）-- GPIO实验

    因为项目所需,所以不得不开始研究M3,我用的是NXP公司的LPC1768这个芯片,它是具有三级流水线的哈佛结构,带独立的本地指令和数据总线以及用于外设的稍微低性能的第三条总线,还包含一个支持随机跳转的 ...

  4. delphi 编码速度提升技能

    效率,是一个永恒的主题. 本文重点强调 delphi ide 中的编码速度技能 一.TForm 窗口重用 当您在写一个管理类软件的时候,有大量的操作窗口,这些窗口会有大量共性.窗口重用就会发挥很大的作 ...

  5. outlook 2003配置连接exchange server 2010报错——无法完成此操作。 与 Microsoft Exchange Server 的连接不可用。 Outlook 必须联机或连接才可完成该操作

    最近安装了一台Exchange 2013邮件服务器,但在客户端Outlook 2013手动配置邮箱时却发现了如下错误:   这里说一个简单的解决办法,实际上第一次启动Outlook时可以自动发现,只需 ...

  6. 2014年辛星解读Javascript之DOM之冒泡和捕获

    上篇博客提到了Javascript事件绑定函数的三个參数.第一个是一个event.第二个是一个function.第三个是一个布尔变量.它用于指定事件传递的顺序,分为冒泡和捕获两种方式,接下来我们将揭开 ...

  7. commons-lang 包常用方法

      package com.java.utils; import java.util.Iterator; import java.util.Map;   import org.apache.commo ...

  8. Bootstrap的aria-label与aria-labelledby

    aria-label: 正常情况下,form表单的input组件都有对应的label,当input组件获取到焦点时,屏幕阅读器会读出相应label里的文本. 但是如果没有给输入框设置label时,当其 ...

  9. PLSQL连接Oracle数据库，使用instantclient_10_2客户端

    使用instantclient_10_2作为PLSQL客户端配置步骤如下:1.将instantclient_10_2文件夹copy到PLSQL的安装目录下(如D:\Program Files\PLSQ ...

  10. 制作U盘启动盘（以CentOS6.3为例）

    借助UltraISO(软碟通),自己百度下载一个即可(同样适用于制作Windows启动盘). 选择文件→打开,选择ISO镜像所在目录,如下两幅图所示: