plupload+ssm 上传
plupload的功能和特点
- 上传方式:****HTML5、Flash、silverlight以及传统的
<input type="file"/>
,plupload会根据环境选择最适合的上传方式。 - 支持拖拽的方式选择要上传的文件
- 支持在前端进行图片的压缩,即在图片上传前就进行压缩。当然你可以手动调节压缩率,图片的大小等。
- 可以直接读取原生文件数据,这样的好处是例如可以在图片文件还未上传之前就能把它显示在页面上预览
- 支持把大文件进行切割上传,还可以中断和继续上传
plupload的使用
- 引入js文件, plupload的源文件自行下载
- 实例化一个plupload对象,传入一个配置参数对象进行各方面的配置
- 调用plupload实例对象的init()方法进行初始化
- 在plupload实例对象上注册各种你需要的事件。plupload从选取文件到文件上传完成这个过程中,会触发很多事件。我们可以通过这些事件来跟plupload进行交互。
- 实现你自己所注册的那些事件的监听函数,通过这些监听函数进行更新UI、提示上传进度、上传后返回的信息等工作
目录结构
这是我的目录结构
这是我的前端页面(表现层)
<body>
<div id="uploader">
<p>Your browser doesn't have Flash, Silverlight or HTML5 support.</p>
</div>
<button id="toStop">暂停一下</button>
<button id="toStart">再次开始</button>
<div id="result"></div>
<script type="text/javascript">
$(function() {
$("#uploader").plupload({
runtimes : 'html5,flash,silverlight,html4',
url : "${ctx}/graduate/plupload/plupload",
// url : "pluploadservlet", //servlet版本
// Maximum file size
max_file_size : '1024mb',
chunk_size : '10mb',
// Resize images on clientside if we can
resize : {
width : 200,
height : 200,
quality : 90,
crop : true
},
// Specify what files to browse for
filters : [ {
title : "Image files",
extensions : "jpg,gif,png"
}, {
title : "Zip files",
extensions : "zip,rar"
} ],
// Rename files by clicking on their titles
rename : true,
// Sort files
sortable : true,
// Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that)
dragdrop : true,
// Views to activate
init:{
FileUploaded:function(upload,file,info){
var response = $.parseJSON(info.response);//对后端返回的json数据进行解析
if(!response.status){
$("#result").append($('<div>'+response.stuInfo+'</div>'))
}
},
},
//FileUploaded就是接收服务器上返回的数据
views : {
list : true,
thumbs : true, // Show thumbs
active : 'thumbs'
},
// Flash settings
flash_swf_url : 'static/plupload/js/Moxie.swf',
// Silverlight settings
silverlight_xap_url : 'static/plupload/js/Moxie.xap',
});
$('#toStop').on('click',function(){
uploader.stop();
})
$('#toStart').on('click',function () {
uploaded.start();
})
});
</script>
<script type="text/javascript" src="static/plupload/js/jquery-ui.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="static/plupload/js/plupload.full.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="static/plupload/js/i18n/zh_CN.js"></script>
<script type="text/javascript" src="static/plupload/js/jquery.ui.plupload/jquery.ui.plupload.min.js" charset="UTF-8"></script>
</body>
还有具体的功能请查看官方APIhttp://www.plupload.com/docs/
后端代码(逻辑控制层)
package com.thinkgem.jeesite.modules.graduate.web;
import com.alibaba.druid.support.json.JSONUtils;
import com.thinkgem.jeesite.common.persistence.Msg;
import com.thinkgem.jeesite.common.utils.StringUtils;
import com.thinkgem.jeesite.modules.graduate.dao.GraduateDao;
import com.thinkgem.jeesite.modules.graduate.entity.Graduate;
import com.thinkgem.jeesite.modules.graduate.service.GraduateService;
import org.apache.log4j.Logger;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.config.annotation.web.configurers.ServletApiConfigurer;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.*;
import java.util.HashMap;
import java.util.Map;
import java.util.concurrent.ExecutorService;
import java.util.concurrent.Executors;
@Controller
@RequestMapping(value="${adminPath}/graduate/plupload")
public class PluploadController{
@Autowired
private GraduateService graduateService;
@Autowired
private GraduateDao graduateDao;
private static final int BUFFER_SIZE=100*1024;
private static final Logger logger= Logger.getLogger(PluploadController.class);
@RequestMapping(value="/")
public String index(HttpServletRequest request){
return "index";
}
/**
* @Author HW
* 使用plupload上传文件
* @param file 文件对象
* @param request 文件名称
* @param session 数据块序号
*
* @return
*/
@RequestMapping(value = "plupload",method = RequestMethod.POST)
@ResponseBody
public void plupload(@RequestParam final MultipartFile file, HttpServletRequest request,
HttpServletResponse response, HttpSession session) throws IOException {
final String name = request.getParameter("name");
final String stuNo = name.substring(0,12);
Graduate graduate = graduateService.getByStuNo(stuNo);
Integer chunk=0,chunks=0;
if (null!=request.getParameter("chunk")&&!request.getParameter("chunk").equals("")){
chunk = Integer.valueOf(request.getParameter("chunk"));
}
if (null!=request.getParameter("chunks")&&!request.getParameter("chunks").equals("")){
chunks=Integer.valueOf(request.getParameter("chunks"));
}
logger.info("chunk:["+chunk+"] chunks["+chunks+"]");
String grade = name.substring(0,2);
String institute = name.substring(2,4);
String major = name.substring(4,6);
String classes = name.substring(6,8);
final String relativePath="/"+grade+"/"+institute+"/"+major+"/"+classes+"/";
final String realPath=session.getServletContext().getRealPath("");
//线程池里的线程数会动态变化,并可在线程被移除前重用
ExecutorService threadPool = Executors.newCachedThreadPool();
if (graduate!=null){
final Integer finalChunk = chunk;
final Integer finalChunks = chunks;
threadPool.execute(new Runnable() {
@Override
public void run() {
try {
//新建文件夹
File folder=new File("C:"+"//"+"stuImg"+relativePath);
if (!folder.exists()){
folder.mkdirs();
}
File destFile = new File(folder,name);
//文件已存在删除旧文件(上传了新同名文件的话 )
if ((finalChunk == 0) && destFile.exists()){
destFile.delete();
destFile = new File(folder,name);
}
//合成文件
appendFile(file.getInputStream(),destFile);
if (finalChunk == finalChunks){
logger.info("上传完成");
}else{
logger.info("还剩["+(finalChunks -1- finalChunk)+"]个块文件");
}
} catch (IOException e) {
logger.error(e.getMessage());
}
}
});
threadPool.execute(new Runnable() {
@Override
public void run() {
Graduate graduate = new Graduate();
String realPathName = relativePath+name;
graduate.setStuImg(realPathName);
graduate.setStuNo(stuNo);
graduateDao.updateByStuNo(graduate);
}
});
}else{
//获取不存在对应学生的信息,然后将其通过json封装好后返回給前台
String msg = "照片"+name+"不存在对应的学生";
Map <String,Object> m = new HashMap<String,Object>();
m.put("status",false);
m.put("stuInfo",msg);
response.getWriter().write(JSONUtils.toJSONString(m));
System.out.println("照片"+name+"不存在对应的学生");
}
}
private void appendFile(InputStream inputStream, File destFile) {
OutputStream out=null;
try{
//plupload配置了chunk的时候新上传的文件append到文件末尾
if (destFile.exists()){
out = new BufferedOutputStream(new FileOutputStream(destFile,true),BUFFER_SIZE);
}else {
out = new BufferedOutputStream(new FileOutputStream(destFile),BUFFER_SIZE);
}
inputStream = new BufferedInputStream(inputStream,BUFFER_SIZE);
int len = 0;
byte[] buffer = new byte[BUFFER_SIZE];
while((len= inputStream.read(buffer))>0){
out.write(buffer,0,len);
}
} catch (Exception e) {
logger.error(e.getMessage());
}finally {
try{
if (null!=inputStream){
inputStream.close();
}
if (null!=out){
out.close();
}
}catch (IOException e){
logger.error(e.getMessage());
}
}
}
}
spring配置文件
使用注解,组件扫描
```
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.0.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">
<context:component-scan base-package="com.plupload.controller" />
<mvc:annotation-driven />
<mvc:default-servlet-handler />
<import resource="web-servlet.xml" />
</beans>
web-servlet.xml配置中加入
<!-- 文件上传 -->
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- set the max upload size100MB -->
<property name="maxUploadSize">
<value>104857600</value>
</property>
<property name="maxInMemorySize">
<value>1024000</value>
</property>
</bean>
“`