写在前面：当初为了实现一个多文件上传可是费了一番功夫，经过我日日夜夜的百度咨询，写了好几种方法，最终还是没能解决问题。我可以很负责任的告诉你，你去百度上不管你形容有多好，只要是涉及多文件，就会查到MultipartFile[] file这个玩意，我也写过了。单文件上传确实只要写MultipartFile file就可以了，那多文件是不是就要涉及到数组呢？我可以告诉你的是，你很幸运的看到了这篇文章。本篇文章使用的是传统的配置资源SSM框架，建议大家用我之前写的文章介绍的springboot整合SSM框架。
需求：SSM框架、mysql数据库、layui技术
整合图：(本图仅仅代表SSM框架整合，其中静态资源最为关键)
关键技术：layui.js、upload.js
代码整合：
注意：在springMvc中需要写入如下代码：
一、首先提供API接口
1、UploadFileController(控制层)
package com.xyyang.controller;
import java.io.File;
import java.util.UUID;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import mons.io.FilenameUtils;
import org.springframework.beans.factory.annotation.Autowired;
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.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import com.xyyang.bean.FileUpload;
import com.xyyang.service.FileService;
@Controller
public class UploadFileController {
@Autowired //注入
private FileService fileService;
//声明接口和方法
@RequestMapping(value = "upload", method = RequestMethod.POST)
public /*此处至关重要，一定要返回json字符转格式*/ @ResponseBody String upload(/* 实体类 */FileUpload fileUpload, /* 上传文件 */MultipartFile file,HttpServletRequest request,HttpServletResponse response) throws Exception{
//判断视图层接收到的请求的图片是否不等于0
if(file.getSize()!=0) {
// 使用UUID给图片重命名，并去掉四个"-"
String name = UUID.randomUUID().toString().replaceAll("-", "");
// 获取文件的扩展名
String ext = FilenameUtils.getExtension(file.getOriginalFilename());
// 组合，例如617afc9dc9c64ae18d1b712be1d377bd.png
String newname = name+"."+ext;
//将文件写入本地，切记要使用转运符
file.transferTo(new File("D:\\javacode\\UploadFileSSM\\WebContent\\upload\\" + newname));
//将文件写入数据库
fileUpload.setImg(newname);
}else{
//如果接口请求失败，文件不保存
fileUpload.setImg(null);
}
//视图层调用业务层
fileService.addImg(fileUpload, file, request, response);
//关键，别问这么多，返回0即可。爱秧提供的js已经封装好了返回0
return "0";
}
}
注意：需要自己建立一个upload文件夹，用于存放上传到本地的文件
2、实体类
package com.xyyang.bean;
public class FileUpload {
private Integer id;
private String img;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getImg() {
return img;
}
public void setImg(String img) {
this.img = img;
}
}
3、FileMapper接口
package com.xyyang.mapper;
import com.xyyang.bean.FileUpload;
public interface FileMapper {
Integer addImg(FileUpload fileUpload);
}
4、FileMapper.xml映射
insert into file(img) values( #{img} )
5、FileService接口
package com.xyyang.service;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.web.multipart.MultipartFile;
import com.xyyang.bean.FileUpload;
public interface FileService {
Integer addImg(FileUpload fileUpload, MultipartFile pictureFile,HttpServletRequest request,HttpServletResponse response) throws Exception;
}
6、FileServiceImpl实现类
package com.xyyang.service;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;
import com.xyyang.bean.FileUpload;
import com.xyyang.mapper.FileMapper;
@Service
public class FileServiceImpl implements FileService {
@Autowired
private FileMapper fileMapper;
public Integer addImg(FileUpload fileUpload, MultipartFile pictureFile,HttpServletRequest request,HttpServletResponse response) throws Exception{
return fileMapper.addImg(fileUpload);
}
}
二、静态资源加入
1、jsp页面写入静态资源
2、项目导入静态资源,如下图所示
图片：
注意：一定要在js目录下，不然就会出错
三、提供视图页面
注意：下面js代码是上传必须的开头部分，以upload.js为主体，每个js上传方法都必须在它内部
layui.use('upload', function(){
var $ = layui.jquery
,upload = layui.upload;
//写下面提供的js代码内容 });
自动上传单张图片：
1、自动上传效果图
2、自动上传html代码
自动上传单张图片
3、自动上传js代码(multiple:true表示上传多张)
//自动上传单张图片
var uploadInst = upload.render({
elem: '#test1'
,url: '${pageContext.request.contextPath}/upload'
,before: function(obj){
layer.load(); //上传loading
//预读本地文件示例，不支持ie8
obj.preview(function(index, file, result){
$('#demo1').attr('src', result); //图片链接(base64)
$('#demo1').attr('style', 'width: 200px;height: 200px;');//设置宽和高 爱秧推荐在这里设置，不会有歧义
});
}
,done: function(res){
//上传失败
if(res.code > 0){
return layer.msg('上传失败');
}
//上传成功
layer.closeAll('loading'); //关闭loading
layer.msg('恭喜你成功上传1张图片');
}
,error: function(){
//演示失败状态，并实现重传
var demoText = $('#demoText');//自己加的一个id
demoText.html('上传失败 重试');
demoText.find('.demo-reload').on('click', function(){
uploadInst.upload();
});
}
});
选择上传多张图片(不自动。需选择图片后手动点击上传)
1、选择上传多张效果图
2、选择上传html代码
选择图片
开始上传
预览图：
3、选择上传js代码(multiple:false表示上传单张)
//多图片上传
upload.render({
elem: '#test2'
,url: '${pageContext.request.contextPath}/upload'
,multiple: true //允许多文件上传
,auto: false//选择文件后不自动上传
,bindAction: '#test2-zidong'//指向一个按钮触发上传
,before: function(obj){
//预读本地文件示例，不支持ie8
layer.load(); //上传loading
obj.preview(function(index, file, result){
$('#demo2').append('')
});
}
,done: function(res,index){
//上传成功
layer.closeAll('loading')
layer.msg('恭喜你上传成功');
}
});
拖拽上传(不自动。需选择图片后手动点击上传)
1、拖拽上传多张效果图
2、拖拽上传html代码
点击上传，或将文件拖拽到此处
开始上传
3、拖拽上传js代码(multiple:false表示上传单张)
//拖拽上传
upload.render({
elem: '#test10'
,url: '${pageContext.request.contextPath}/upload'
,auto: false
,drag: true
,multiple: true
,bindAction: '#test10-zidong'//指向一个按钮触发上传
,before: function(obj){
layer.load(); //上传loading
}
,done: function(res){
layer.closeAll('loading'); //关闭loading
layer.msg('恭喜你上传成功');
}
});
多文件上传列表(不自动。选择图片后手动上传，可删除，失败可重传)
1、多文件上传列表效果图
选择图片准备
成功
失败
2、多文件上传列表html代码
选择多文件
文件名大小状态操作
开始上传
3、多文件上传列表js代码(multiple:false表示上传单张)
//多文件列表示例
var demoListView = $('#demoList')
,uploadListIns = upload.render({
elem: '#testList'//绑定元素
,url: '${pageContext.request.contextPath}/upload'//上传接口
,accept: 'file'//允许上传的文件类型
,multiple: true
,auto: false
,bindAction: '#testListAction'
,choose: function(obj){
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
//读取本地文件
obj.preview(function(index, file, result){
var tr = $(['
'
,'
'+ file.name +''
,'
'+ (file.size/1014).toFixed(1) +'kb'
,'
等待上传'
,'
'
,'重传'
,'删除'
,'
'
,'
'].join(''));
//单个重传
tr.find('.demo-reload').on('click', function(){
obj.upload(index, file);
});
//删除
tr.find('.demo-delete').on('click', function(){
delete files[index]; //删除对应的文件
tr.remove();
uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
});
demoListView.append(tr);
});
}
,done: function(res, index, upload){
if(res.code != 0){ //上传成功
var tr = demoListView.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(2).html('上传成功');
tds.eq(3).html('已成功，无须操作。再次添加新的图片时不会再重复上传'); //清空操作
return delete this.files[index]; //删除文件队列已经上传成功的文件
}
this.error(index, upload);
}
,error: function(index, upload){
var tr = demoListView.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(2).html('上传失败');
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
}
});
四、参数讲解(爱秧只讲解10点)
1、elem：指向容器选择器，如：elem: '#id'。也可以是DOM对象
2、url：服务端上传接口，后端需返回json字符串
3、size：设置文件最大可允许上传的大小，单位 KB。
4、exts：允许上传的文件后缀。一般结合accept参数类设定。假设 accept 为 file 类型时，那么你设置exts: 'zip|rar|7z'即代表只允许上传压缩格式的文件。如果 accept 未设定，那么限制的就是图片的文件格式
5、accept：指定允许上传时校验的文件类型，可选值有：images(图片)、file(所有文件)、video(视频)、audio(音频)
6、mutiple：是否允许多文件上传。设置true即可开启。
7、auto：是否选完文件后自动上传。如果设定false，那么需要设置bindAction参数来指向一个其它按钮提交上传
8、bindAction：指向一个按钮触发上传，一般配合 auto: false 来使用。值为选择器或DOM对象，如：bindAction: '#btn'
9、before：文件提交上传前的回调
10、done:执行上传请求后的回调。返回三个参数，分别为：res(服务端响应信息)、index(当前文件的索引)、upload(重新上传的方法，一般在文件上传失败后使用)。
版权声明：若无特殊注明，本文皆为《
爱秧 》原创，转载请保留文章出处。
本文链接：基于SSM框架、Layui的多文件上传、包括图片，压缩包，音频等文件(与数据库挂钩) https://42xyyang.top/post-49.html
正文到此结束
layui实现文件压缩上传_基于SSM框架 Layui的多文件上传 包括图片 压缩包 音频等文件（与数据库挂钩） - 爱秧博客...
