使用jQuery.form.js/springmvc框架实现文件上传功能

使用的技术有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.jb51.net/article/84078.htm）

@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框架实现文件上传功能，希望对大家有所帮助，如果大家想了解更多精彩内容，敬请关注我们网站！

赞 (0)

相关推荐

  • 在Java的Spring框架的程序中使用JDBC API操作数据库

    同时与数据库使用普通的旧JDBC的工作,它变得繁琐写不必要的代码来处理异常,打开和关闭数据库连接等,但Spring的JDBC框架需要的所有低层次细节从打开连接,准备和执行SQL语句,过程异常,处理事务,最后关闭连接. 所以,你所要做的只是定义连接参数,并指定要执行的SQL语句,并做必要的工作,在每次迭代时从数据库中获取数据. Spring JDBC提供了一些方法和相应不同的类与数据库进行交互.我要采取经典和最流行的做法,利用JdbcTemplateclass框架.这是管理的所有数据库的通信和异常

  • spring实现jdbctemplate添加事务支持示例

    复制代码 代码如下: public interface JdbcTemplate extends JdbcOperations {public abstract void beginTranstaion(); public abstract void commit(); public abstract void rollback();} 复制代码 代码如下: public class JdbcTemplateImpl extends org.springframework.jdbc.core.J

  • spring的jdbctemplate的crud的基类dao

    复制代码 代码如下: import java.util.List; /*** * 基本接口 *  * @author xyq * @param <T> *  */public interface BaseDaoInf<T> { /***  * 查询接口  *   * @return  */ public List<T> find(String sql, Object[] parameters, Class<T> cl); /***  *  添加,更新,删除接

  • spring对JDBC和orm的支持实例详解

    spring对JDBC和orm的支持实例详解

    简介 Spring提供的DAO(数据访问对象)支持主要的目的是便于以标准的方式使用不同的数据访问技术,如JDBC,Hibernate或者JDO等.它不仅可以让你方便地在这些持久化技术间切换, 而且让你在编码的时候不用考虑处理各种技术中特定的异常. 一致的异常层次 Spring提供了一种方便的方法,把特定于某种技术的异常,如SQLException, 转化为自己的异常,这种异常属于以 DataAccessException 为根的异常层次.这些异常封装了原始异常对象,这样就不会有丢失任何错误信息的

  • SpringMVC处理Form表单实例

    SpringMVC处理Form表单实例

    Spring MVC 表单处理例子下面的例子说明了如何编写一个简单的基于 web 的应用程序,它利用了使用 Spring 的 Web MVC 框架的 HTML 表单. 一 测试项目搭建 (1)新建Java Web项目,并引入几个SpringMVC项目所需要的jar包,项目结构和所需要的jar包如下: ①web.xml: <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3

  • jquery.form.js框架实现文件上传功能案例解析（springmvc）

    jquery.form.js框架实现文件上传功能案例解析（springmvc）

    上一篇 Bootstrap自定义文件上传下载样式(http://www.jb51.net/article/85156.htm)已经有一段时间了,一直在考虑怎么样给大家提交一篇完美的逻辑处理功能.现在我结合自己的实际工作给大家分享一下. 使用的技术有jquery.form.js框架, 以及springmvc框架.主要实现异步文件上传的同时封装对象,以及一些注意事项. 功能本身是很简单的,但是涉及到一些传递参数类型的问题.例如:jquery的ajax方法与jquery.form.js中的ajaxSu

  • springMVC结合AjaxForm上传文件

    最近在项目中需要上传文件文件,之前一直都是form提交的,尝试了一下AjaxForm,感觉还比较好用,写篇随笔mark下,供以后使用. 准备工作: 下载jquery-form.js 相关jar: commons-fileupload-1.1.1.jar commons-io-1.3.2.jar 在spring-servlet.xml进行multipartResolver配置: <bean id="multipartResolver" class="org.springf

  • 使用jQuery.form.js/springmvc框架实现文件上传功能

    使用jQuery.form.js/springmvc框架实现文件上传功能

    使用的技术有jquery.form.js框架, 以及springmvc框架.主要实现异步文件上传的同时封装对象,以及一些注意事项. 功能本身是很简单的,但是涉及到一些传递参数类型的问题.例如:jquery的ajax方法与jquery.form.js中的ajaxSubmit方法的参数,具体细节将在下一篇博客中分享. 重点: html表格三要素: action="fileUpload/fileUpload" method="post" enctype="mul

  • Struts2+jquery.form.js实现图片与文件上传的方法

    本文实例讲述了Struts2+jquery.form.js实现图片与文件上传的方法.分享给大家供大家参考,具体如下: jquery.form.js是jQuery的一个官方用语支持异步上传文件的插件.官方网站:http://plugins.jquery.com/form/ 结合Struts2三步轻松实现文件上传 一般是针对一个页面可能不止一个Form表单,所以在一个面提交表单会影响到另一个表单,为此,图片上传表单就可以使用无刷新提交方式上传,也就是异步上传,这时jquery.from.js就派上用

  • Spring框架实现文件上传功能

    在Java中实现文件的上传有多种方式,如smartUpload或是使用Strus2,本文与大家分享使用Spring框架中的MultipartFile类来实例文件的上传. 不啰嗦了,直接上干货.先是编写了一个实现文件上传的类FileUploadingUtil,此类中定义了两个对外公开的方法,upload和getFileMap. 前者需要传入一个Map参数,是用户提交的表单中的文件列表,最终返回值的也是一个Map类型对象,其键名为上传的文件名称,键值为文件在服务器上的存储路径:后者主要是用于测试用途

  • node.js express框架实现文件上传与下载功能实例详解

    本文实例讲述了node.js express框架实现文件上传与下载功能.分享给大家供大家参考,具体如下: 背景 昨天吉视传媒的客户对IPS信息发布系统又提了一个新需求,就是发布端发送消息时需要支持附件的上传,而接收端可以对发布端上传的附件进行下载:接收端回复消息时也需要支持上传附件,发布端可以对所有接收端上传的附件进行打包下载. 功能实现 前台部分 前台使用webUploader插件即可,这是百度开发的一款文件上传组件,具体使用查看它的API即可.这个项目之前开发的时候前台使用了angular.

  • SpringMVC + servlet3.0 文件上传的配置和实现代码

    简单几步,实现SpringMVC+servlet3.0文件上传功能: 第一步:配置web.xml文件中的servlet,添加multipart-config: <!-- SpringMVC --> <servlet> <servlet-name>myWeb</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-clas

  • Node.js开发教程之基于OnceIO框架实现文件上传和验证功能

    Node.js开发教程之基于OnceIO框架实现文件上传和验证功能

    OnceIO 是 OnceDoc 企业内容(网盘)的底层Web框架,它可以实现模板文件.静态文件的全缓存,运行起来完全不需要I/O操作,并且支持客户端缓存优化,GZIP压缩等(只在第一次压缩),拥有非常好的性能,为您节约服务器成本.它的模块化功能,可以让你的Web进行分布式存储,即一个扩展包里即包含前端.后端和数据库定义,只需通过添加/删除目录的方式就可实现功能删减,实现真正的模块化扩展.这里是介绍如何使用OnceIO的一系列文章. 在这一章节中,我们将为大家演示如何使用 OnceIO 实现文件

  • node.js使用express框架进行文件上传详解

    关于node.js使用express框架进行文件上传,主要来自于最近对Settings-Sync插件做的研究. 目前的研究算是取得的比较好的进展. Settings-Sync中通过快捷键上传文件,其实主要还是请求后端接口. 于是我便使用node.js模拟一个服务,这个服务其实就相当于github api(Settings-Sync实际请求的接口,比如token验证,gist存储创建等都是来自github 对应的api). 话不多说,直接代码贴起讲解: 1.创建一个node.js项目(这里我以ex

  • AjaxUpLoad.js实现文件上传功能

    AjaxUpLoad.js的使用实现无刷新文件上传,如图. 图1 文件上传前 图2 文件上传后 1.创建页面并编写HTML 上传文档: <div class="uploadFile"> <span id="doc"><input type="text" disabled="disabled" /></span> <input type="hidden"

  • 利用SpringMVC和Ajax实现文件上传功能

    个人根据相关资料实现利用SpringMVC和Ajax实现文件上传功能: 环境: 1.JDK1.7 2.maven3.3.9 3.Tomcat7 第一步: 导入相关jar包: 第二步: 配置springmvc-config.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xml

  • SpringMVC框架实现图片上传与下载

    SpringMVC框架实现图片上传与下载

    本文实例为大家分享了SpringMVC框架实现图片上传与下载的具体代码,供大家参考,具体内容如下 1.新建一个Maven webapp项目,引入需要用的夹包,pom.xml文件的依赖包如下: <dependencies> <!-- 用于生成图片的缩略图 --> <dependency> <groupId>net.coobird</groupId> <artifactId>thumbnailator</artifactId>

随机推荐