文件上传——ssi-uploader插件
子车文康
一般文件上传的流程：
选择文件-》将文件传递到后台-》输入流以字节方式读取文件-》输出流根据指定路径写入到服务器指定位置-》文件上传结束
uploadFile_ssi-uploader.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="UTF-8" />
<title>http://localhost:8081/osu-env/testhtml/uploadFile1.jsp</title>
<link rel="stylesheet" href="../static/components/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="../static/components/ssi-uploader/styles/ssi-uploader.css" />
<style type="text/css">
#spanNote {
margin-left: 20px;
}
</style>
</head>
<body>
<div class="row">
<div class="col-lg-12">
<form class="form-horizontal form-bordered" role="form" id="uploadImage">
<div class="panel-body">
<div class="row">
<div>
<h3>文件上传——ssi-uploader插件演示：</h3>
<span id="spanNote">修改ssi-uploader.js中861行,自定义可上传文件类型有：文档txt,doc,docx,xls,ppt,pptx,pdf;图片jpg,jpeg,png,bmp,gif;视频mp4,flv</span>
</div>
<div class="col-md-12">
<h4>1. 拖拽区域+ 效果图预览：</h4>
<input type="file" multiple id="ssi-upload" />
</div>
<div class="col-md-12">
<h4>2. 拖拽区域+无预览图效果：</h4>
<input type="file" multiple id="ssi-upload2"/>
</div>
<div class="col-md-12">
<h4>3.无拖拽区域+ 效果图预览：</h4>
<input type="file" multiple id="ssi-upload3"/>
</div>
</div>
</div>
</form>
</div>
</div>
<script src="../static/components/jquery-1.10.1.min.js"></script><!-- 此行jquery-1.10.1.min.js，必须在 其他**.js之上 -->
<script src="../static/components/ssi-uploader/js/ssi-uploader.js"></script>
<script src="../static/js/upload_ssi_uploader.js"></script>
</body>
</html>
uploadFile_ssi_uploader.js
$(function(){
/*------------------文件上传——ssi-uploader插件初始化------------------*/
//1. 拖拽区域+ 效果图预览：
$('#ssi-upload').ssi_uploader({
url:'../live/uploadFile_ssi_uploader.do',
maxNumberOfFiles:8,//每次允许上传多少个文件
maxFileSize:2048,//允许上传的最大文件尺寸
locale:"zh_CN",//使用中文
//preview:false,//禁止图片预览效果
//dropZone:false,//禁止拖拽区域
allowed:['jpg', 'jpeg', 'png', 'bmp', 'gif','mp4','txt','flv','pdf','doc','docx','ppt','pptx','xls'],
onUpload:function(data){
alert("上传成功！");
},
});
//2. 拖拽区域+无预览图效果：
$('#ssi-upload2').ssi_uploader({
url:'../live/uploadFile_ssi_uploader.do',
maxNumberOfFiles:8,//每次允许上传多少个文件
maxFileSize:2048,//允许上传的最大文件尺寸
locale:"zh_CN",//使用中文
preview:false,//禁止图片预览效果
//dropZone:false,//禁止拖拽区域
allowed:['jpg', 'jpeg', 'png', 'bmp', 'gif','mp4','txt','flv','pdf','doc','docx','ppt','pptx','xls'],
onUpload:function(data){
alert("上传成功！");
},
});
//3.无拖拽区域+ 效果图预览：
$('#ssi-upload3').ssi_uploader({
url:'../live/uploadFile_ssi_uploader.do',
maxNumberOfFiles:8,//每次允许上传多少个文件
maxFileSize:2048,//允许上传的最大文件尺寸
locale:"zh_CN",//使用中文
//preview:false,//禁止图片预览效果
dropZone:false,//禁止拖拽区域
allowed:['jpg', 'jpeg', 'png', 'bmp', 'gif','mp4','txt','flv','pdf','doc','docx','ppt','pptx','xls'],
onUpload:function(data){
alert("上传成功！");
},
});
}); UploadFile_ssi_uploaderController.java
@Controller
@RequestMapping(value = "live")
public class UploadFile_ssi_uploaderController {
/**
* @Description: TODO(前台使用ssi-uploader插件，后台处理文件上传)
* @param: @param request
* @param: @param params
* @param: @return
* @return: String
* @throws
*/
@RequestMapping(value = "uploadFile_ssi_uploader.do")
@ResponseBody
public String uploadFile_ssi_uploader(HttpServletRequest request){
String back=FileUtil.uploadFile_ssi_uploader(request);
return back;
}
}FileUtil.java
/**
* @Description: TODO(处理文件上传)
* @param: @param request
* @param: @param params
* @param: @return
* @return: String
* @throws
*/
public static String uploadFile_ssi_uploader(HttpServletRequest request){
MultipartHttpServletRequest Murequest = (MultipartHttpServletRequest)request;
Map<String, MultipartFile> files = Murequest.getFileMap();//得到文件map对象
String upaloadUrl ="D:/upload/photo/";//得到当前工程路径拼接上文件名
File dir = new File(upaloadUrl);
if(!dir.exists())//目录不存在则创建
dir.mkdirs();
for(MultipartFile file :files.values()){
String fileName=file.getOriginalFilename();//源文件名
File tagetFile = new File(upaloadUrl+fileName);//创建文件对象
if(!tagetFile.exists()){//文件名不存在 则新建文件，并将文件复制到新建文件中
try {
tagetFile.createNewFile();
} catch (IOException e) {
e.printStackTrace();
}
try {
file.transferTo(tagetFile);//到这里就可以上传了，以下是处理图片及允许gif的上传
//图片扩展名
String types=fileName.substring(fileName.lastIndexOf(".")+1).toLowerCase();
//如果需要存储原图则不需要if中处理
if(!types.contains("gif")){
//Thumbnails.of(tagetFile).size(1024,768).toFile(tagetFile);//改变图片大小为1024*768
}
} catch (IllegalStateException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}
}
return "true";
} <!--参考
API+插件http://www.jq22.com/jquery-info9613
http://www.youtiy.com/detail_302.html
https://blog.csdn.net/qq_21875331/article/details/82083201
http://www.cnblogs.com/Hmin2199/p/6018764.html
https://blog.csdn.net/StriverFeng/article/details/72046940?locationNum=10&fps=1
-->
类似资料：