您的位置：首页 > Web前端 > JQuery

springmvc+jquery-form插件实现页面无刷新上传

2016-12-05 15:27 585 查看

本文介绍jquery-form插件上传文件的用法，后台使用的是java，框架使用springmvc

1.需要使用的jquery文件，jquery-3.0.0.js和jquery-form.js

下载地址
http://malsup.com/jquery/form/#download
http://malsup.github.io/jquery.form.js

2.jsp页面代码，要引入jquery.form.js库文件，这样就可以使用jquery.form中的ajaxSubmt方法了

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>信息管理系统</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="scripts/jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="scripts/jquery/jquery-form.js"></script>
<script type="text/javascript">
function uploadimg() {
$("#upform").ajaxSubmit({
type:'post',
url:'upload.do',
success:function(data){
//alert(data);
},
error:function(XmlHttpRequest,textStatus,errorThrown){
}
});
}
</script>
</head>
<body>
<form action="#" method="post" enctype="multipart/form-data" id="upform">
<div style="float: left; width: 50%">
<input type="file" name="imageUpload" /> <input onclick="uploadimg()" type="button" value="上传" style="margin-top: 10px">
</div>
</form>
</body>
</html>

3.服务端java代码

[b]获取请求并强制转换成MultipartHttpServletRequest的对象mreq，mreq.getFile("xxxx")中xxx要和jsp页面中表单元素name的值相对应，然后通过文件输出流写到相应的文件路径下
[/b]

package com.hwua.controller;

import java.io.FileOutputStream;
import java.io.IOException;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;

import com.google.gson.Gson;
import com.hwua.pojo.Goods;
import com.hwua.pojo.Gtype;
import com.hwua.service.GoodsTypeService;

@Controller
public class GoodsController {

@RequestMapping("upload")
public void upload(HttpServletRequest req, HttpServletResponse resp) throws IOException {
PrintWriter writer = null;
resp.setContentType("text/html;charset=UTF-8");
writer = resp.getWriter();
try {
MultipartHttpServletRequest mreq = (MultipartHttpServletRequest) req;
MultipartFile file = mreq.getFile("imageUpload");
String fileName = file.getOriginalFilename();
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss");
FileOutputStream fos = new FileOutputStream(req.getSession().getServletContext().getRealPath("/")
+ "images/goods/" + sdf.format(new Date()) + fileName.substring(fileName.lastIndexOf('.')));
fos.write(file.getBytes());
fos.flush();
fos.close();
writer.write("success");
writer.close();
} catch (Exception e) {
writer.write(e.getMessage());
}
}
}

4.applicationContext.xml用到的配置

这个配置没有写的话，在controller中做MultipartHttpServletRequest的强制类型转换时被抛出类转换异常，在这个这个第一上传文件的大小范围

<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize">
<value>102400000</value>
</property>
<property name="maxInMemorySize">
<value>4096</value>
</property>
</bean>

tip：除了springmvc的核心包外，需要添加另外两个jar包

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航