写在前面：当初为了实现一个多文件上传可是费了一番功夫，经过我日日夜夜的百度咨询，写了好几种方法，最终还是没能解决问题。我可以很负责任的告诉你，你去百度上不管你形容有多好，只要是涉及多文件，就会查到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 org.apache.commons.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

正文到此结束