SpringMVC的多图片（文件）拖拽批量上传到项目中

最新推荐文章于 2024-08-01 20:00:37 发布

B3325

最新推荐文章于 2024-08-01 20:00:37 发布

阅读量365

点赞数

分类专栏：工具箱

本文链接：https://blog.csdn.net/B3325/article/details/89921357

版权

工具箱专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近需要图片批量拖拽上传，记录一下下。我的项目使用的是SSM框架。

需要的jar包

 <!-- 上传下载需要设计到的jar包 -->
        <!-- https://mvnrepository.com/artifact/commons-io/commons-io -->
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.6</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->
        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.4</version>
        </dependency>

SpringMVC.xml中的配置

	<!-- 定义文件上传解析器 -->
	<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
		<!-- 设定默认编码 -->
		<property name="defaultEncoding" value="UTF-8"></property>
		<!-- 设定文件上传的最大值31MB，31*1024*1024 -->
		<property name="maxUploadSize" value="32505856"></property>
        <!-- 其他的大家可以自行配置，不影响主功能-->
	</bean>

Controller层的代码：Msg实体类是我返回结果自己建的，用户ajax请求返回json数据

 @RequestMapping(value = "/uploadPicture")
    public @ResponseBody
    Msg uploadPicture(@RequestParam(value = "file") MultipartFile[] files, HttpServletRequest request)
            throws IOException {
        if (files != null && files.length != 0) {
            for (int i = 0; i < files.length; i++) {
                MultipartFile file = files[i];
                UploadUtils.upload(request, file);
            }
        }
        return Msg.success("上传成功");
    }

UploadUtil实体类：

package cn.wannengde.toolkit.tool;

import org.apache.commons.io.FilenameUtils;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.util.UUID;

/*
@author 
@date  2019/5/6 - 11:30
*/
public class UploadUtils {

    public static String upload(HttpServletRequest request, MultipartFile file) throws IOException {
        String imgPath = null;  //  存储装配后的地址
        if(file != null && !file.isEmpty()){
            //使用UUID给图片重命名，并去掉生成的四个"-"
            String name = UUID.randomUUID().toString().replace("-","");
            //获得文件的扩展名
            String ext = FilenameUtils.getExtension(file.getOriginalFilename());
            //根据项目真实路径设置图片的上传路径
            String url = request.getSession().getServletContext().getRealPath("/upload");
            //检验文件夹是否存在，如果不存在会自动建立
            isFolderExists(url);
            // 以绝对路径保存重名命后的图片
            file.transferTo(new File(url + "/" + name + "." + ext));
            // 装配图片地址
            imgPath = "upload/" + name + "." + ext;
        }
        return imgPath;
    }

    /**
     * 验证文件夹是否存在,如果不存在自动建立
     *
     * @param strFolder
     * @return
     */
    public static boolean isFolderExists(String strFolder) {
        File file = new File(strFolder);

        if (!file.exists()) {
            if (file.mkdir()) {
                return true;
            } else {
                return false;
            }

        }
        System.out.println("-----------------文件上传路径：" + strFolder);
        return true;
    }
}

前端页面：使用的是Jquery插件实现的，插件其中可能有很多坑，我踩中了两个，还有一个就是插件中的CSS中利用了

imagesUploadContent这个class来设置，如果要改需要去对应CSS里面去改改。

<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh">
<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<head>
	<meta charset="utf-8">
	<title>上传图片</title>
	<link href="${APP_PATH}/static/css/iconfont.css" rel="stylesheet" />
	<link href="${APP_PATH}/static/css/imagesUpload.css" rel="stylesheet" />
</head>
<body>
<div class="imagesUploadContent" id="imagesUploadContent">
	<!--
    <div class="uploadBtns">
      <ul>
        <li><div class="selectFileBtn">选择文件</div></li>
        <li><div class="uploadFileBtn"><i class="iconfont icon-shangchuan"></i></div></li>
        <li><div class="deleteFileBtn"><i class="iconfont icon-shanchu"></i></div></li>
      </ul>
    </div>
    <div class="box">
      <div class="fileItem" fileCodeId="0">
        <div class="imgShow">
          <img src="christmas_4x.png" width="150" height="150" />
        </div>
        <div class="status"><i class="iconfont icon-close"></i></div>
        //<div class="status"><i class="iconfont icon-right"></i></div>
        <div class="fileName">图片名</div>
      </div>
    </div>
    <input type="file" id="fileSelectInput" class="fileSelectInput" />
  -->
</div>

<script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="${APP_PATH}/static/js/imagesUpload.js"></script>
<script type="text/javascript">
	$(".imagesUploadContent").initUpload({
		fileType:"*", //文件类型 , 默认所有文件
		fileMaxNum:3,           //文件最大数量 ， 默认没有限制
		fileMaxSize:1000,        //单个文件最大大小  ， 默认没有限制
		fileSavePath : "da",
		uploadUrl:"${APP_PATH}/uploadPicture"
	});
	/*
    var initOption={
    "uploadId":uploadId,
    "uploadUrl":"#",    //上传地址
    "fileType":"*",     //文件类型
    "fileMaxNum":-1,  //文件最大数量：-1为没有限制 ,必须为整数
    "fileMaxSize":-1, //单个文件最大大小：-1为没有限制， 单位kb
    "canDrag":true,     //文件是否可拖拽
    "isHiddenUploadBtn":false,    //是否隐藏上传按钮  ， 默认为不隐藏
    "isHiddenCleanBtn":false,     //是否隐藏清除按钮 ， 默认为不隐藏
    "ismultiple":true,            //是否可以选择多文件
    "isAutoClean":true,           //是否上传后自动完成清除
    "fileSavePath":"",            //文件上传后后台设置的根目录
    "uploadSuccess":function(){}, //上传成功后的回调函数
    "uploadFalse":function(){},   //上传失败后的回调函数

    }
    */
</script>
</body>
</html>

插件位置

链接: https://pan.baidu.com/s/1hgpAmcKIcG0IFiLiS3NUrg 提取码: mfuv