一、html页面
<link rel="stylesheet" href="fileinput/css/fileinput.min.css" />
<script type="text/javascript" src="fileinput/js/fileinput.min.js"></script>
<script type="text/javascript" src="fileinput/js/zh.js"></script>
<!-- 引入fileinput的初始化js代码 -->
<script type="text/javascript" src="fileinput/myinput/my_fileinput.js"></script>
<body>
<!-- 添加附件 -->
<div class="modal-body">
<!-- <input type="file" name="reportFile" id="reportFile" multiple class="file" />
class="file" 会影响中文显示-->
<input type="file" id="input-id" name="file" multiple="multiple" data-preview-file-type="text">
</div>
</body>
二、js代码
$(document).ready(function(){
//0.初始化fileinput
var oFileInput = new FileInput();
oFileInput.Init("input-id", "/uploadMyFile");//第一个参数是input输入的id,第二个是上传的url
});
var FileInput = function () {
var oFile = new Object();
//初始化fileinput控件(第一次初始化)
oFile.Init = function(ctrlName, uploadUrl) {
var control = $('#' + ctrlName);
//初始化上传控件的样式
control.fileinput({
language: 'zh', //设置语言
uploadUrl: uploadUrl, //上传的地址
allowedFileExtensions: ['gif','jpg', 'png','txt','doc'],//接收的文件后缀
showUpload: true, //是否显示上传按钮
showCaption: false,//是否显示标题
browseClass: "btn btn-primary", //按钮样式
//dropZoneEnabled: false,//是否显示拖拽区域
//minImageWidth: 50, //图片的最小宽度
//minImageHeight: 50,//图片的最小高度
//maxImageWidth: 1000,//图片的最大宽度
//maxImageHeight: 1000,//图片的最大高度
maxFileSize: 300,//单位为kb,如果为0表示不限制文件大小
//minFileCount: 0,
layoutTemplates :{
actionUpload:'',//去除上传预览缩略图中的上传图片;
actionZoom:''//去除上传预览缩略图中的上传图片;
},
maxFileCount: 10, //表示允许同时上传的最大文件个数
enctype: 'multipart/form-data',
validateInitialCount:true,
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}!"
});
$("#input-id").on('filepreupload', function(event, data, previewId, index) { //上传中
var form = data.form, files = data.files, extra = data.extra,
response = data.response, reader = data.reader;
console.log('文件正在上传');
});
$("#input-id").on("fileuploaded", function (event, data, previewId, index) { //一个文件上传成功
console.log('文件上传成功1!');
});
$("#input-id").on('fileerror', function(event, data, msg) { //一个文件上传失败
console.log('文件上传失败!'+data);
});
}
return oFile;
三、后台controller
/**
* 上传文件
* @param request
* @param response
* @param file 上传的文件,支持多文件
* @throws Exception
*/
@RequestMapping("/uploadMyFile")
public void insert(HttpServletRequest request,HttpServletResponse response,@RequestParam("file") MultipartFile[] file) throws Exception{
PrintWriter writer = response.getWriter();
if(file!=null&&file.length>0){
//组合image名称,“;隔开”
List<String> fileName =new ArrayList<String>();
try {
for (int i = 0; i < file.length; i++) {
if (!file[i].isEmpty()) {
//上传文件,随机名称,";"分号隔开
fileName.add(FileUtil.uploadImage(request, "/upload/"+TimeUtils.formateString("yyyy-MM-dd")+"/", file[i], true));
}
}
//上传成功
if(fileName!=null&&fileName.size()>0){
Gson gson = new Gson();
String json = gson.toJson("");//得到最大值后将其写入前端,这里暂时没写
writer.print(json);这里必须是Json数据
}else {
writer.print("上传失败!文件格式错误!");这里必须是Json数据
}
} catch (Exception e) {
e.printStackTrace();
writer.print("上传出现异常!异常出现在:class.UploadController.insert()");这里必须是Json数据
}
}else {
writer.print("没有文件");这里必须是Json数据
}
}
四、文件上传的Utils
public class FileUtil {
/**
* 上传文件
* 原名称
* @param request 请求
* @param path_deposit 存放位置(路径)
* @param file 文件
* @param isRandomName 是否随机名称
* @return 完整文件路径
*/
public static String uploadImage(HttpServletRequest request,String path_deposit,MultipartFile file,boolean isRandomName) {
//上传
try {
String[] typeImg={"gif","png","jpg","txt","doc"};
if(file!=null){
String origName=file.getOriginalFilename();// 文件原名称
System.out.println("上传的文件原名称:"+origName);
// 判断文件类型
String type=origName.indexOf(".")!=-1?origName.substring(origName.lastIndexOf(".")+1, origName.length()):null;
if (type!=null) {
boolean booIsType=false;
for (int i = 0; i < typeImg.length; i++) {
if (typeImg[i].equals(type.toLowerCase())) {
booIsType=true;
}
}
//类型正确
if (booIsType) {
//存放图片文件的路径
String path=request.getSession().getServletContext().getRealPath(path_deposit);
//组合名称
String fileSrc="";
//是否随机名称
if(isRandomName){
origName=TimeUtils.formateString("yyyy-MM-dd-")+UUID.randomUUID().toString()+origName.substring(origName.lastIndexOf("."));
}
//判断是否存在目录
File targetFile=new File(path,origName);
if(!targetFile.exists()){
targetFile.mkdirs();//创建目录
}
//上传
file.transferTo(targetFile);
//完整路径
fileSrc=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+path_deposit+origName;
System.out.println("图片上传成功:"+fileSrc);
return fileSrc;
}
}
}
return null;
}catch (Exception e) {
e.printStackTrace();
return null;
}
}
}
五、pom中需要添加的包
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.2</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.3</version>
</dependency>
六、Springmvc的配置
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="defaultEncoding" value="utf-8"></property>
<property name="maxUploadSize" value="10485760000"></property>
<property name="maxInMemorySize" value="40960"></property>
</bean>