Spring MVC----文件上传

前端配置

  普通的form表单图片上传

　　仅支持post请求

    <form action="/website/realAuthUpload.do" enctype="multipart/form-data" method="post">
        <input type="file" name="file">
        <input type="submit">
    </form>

 

  使用dropzone框架

　　dropzone CDN   https://www.bootcdn.cn/dropzone/

<link href="https://cdn.bootcss.com/dropzone/5.5.1/min/basic.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/dropzone/5.5.1/min/dropzone.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/dropzone/5.5.1/min/dropzone.min.js"></script>

或者去官网下载（dist文件）

  介绍

　　它是轻量级的，不依赖于任何其他库（如jQuery），并且是高度可定制的。

  使用Dropzone

　　只需要一个 div 元素，用 JavaScript 代码启用即可

　　html结构

<div id="dropz" class="dropzone"></div>　

　　JavaScript 启用代码如下：

var myDropzone = new Dropzone("#dropz", {
    url: "/upload",
    dictDefaultMessage: '拖动文件至此或者点击上传', // 设置默认的提示语句
    paramName: "dropzFile", // 传到后台的参数名称
    init: function () {
        this.on("success", function (file, data) {
            // 上传成功触发的事件，如果需要获取data数据，后端必须返回一个标准的json数据。
        });
    }
});

　　其中 url 是必须的值，指明文件上传提交到哪个页面。其他的值都是可选的，如果使用默认值的话可以省略

　　详细配置 Dropzone

　　　　功能选项

• url：最重要的参数，指明了文件提交到哪个页面
• method：默认为 post，如果需要，可以改为 put
• paramName：相当于 <input> 元素的 name 属性，默认为 file
• maxFilesize：最大文件大小，单位是 MB
• maxFiles：默认为 null，可以指定为一个数值，限制最多文件数量
• addRemoveLinks：默认 false。如果设为 true，则会给文件添加一个删除链接
• acceptedFiles：指明允许上传的文件类型，格式是逗号分隔的 MIME type 或者扩展名。例如：image/*, application/pdf, .psd, .obj
• uploadMultiple：指明是否允许 Dropzone 一次提交多个文件。默认为 false。如果设为 true，则相当于 HTML 表单添加 multiple 属性
• headers：如果设定，则会作为额外的 header 信息发送到服务器。例如：{"custom-header": "value"}
• init：一个函数，在 Dropzone 初始化的时候调用，可以用来添加自己的事件监听器
• forceFallback：Fallback 是一种机制，当浏览器不支持此插件时，提供一个备选方案。默认为 false。如果设为 true，则强制 fallback
• fallback：一个函数，如果浏览器不支持此插件则调用

　　　　翻译选项

• dictDefaultMessage：没有任何文件被添加的时候的提示文本
• dictFallbackMessage：Fallback 情况下的提示文本
• dictInvalidInputType：文件类型被拒绝时的提示文本
• dictFileTooBig：文件大小过大时的提示文本
• dictCancelUpload：取消上传链接的文本
• dictCancelUploadConfirmation：取消上传确认信息的文本
• dictRemoveFile：移除文件链接的文本
• dictMaxFilesExceeded：超过最大文件数量的提示文本

　　　　常用事件

　　　　　　以下事件接收 file 为第一个参数

• addedfile：添加了一个文件时发生
• removedfile：一个文件被移除时发生。你可以监听这个事件并手动从服务器删除这个文件
• uploadprogress：上传时按一定间隔发生这个事件。第二个参数为一个整数，表示进度，从 0 到 100。第三个参数是一个整数，表示发送到服务器的字节数。当一个上传结束时，Dropzone 保证会把进度设为 100。注意：这个函数可能被以同一个进度调用多次
• success：文件成功上传之后发生，第二个参数为服务器响应
• complete：当文件上传成功或失败之后发生
• canceled：当文件在上传时被取消的时候发生
• maxfilesreached：当文件数量达到最大时发生
• maxfilesexceeded：当文件数量超过限制时发生

　　　　　　以下事件接收一个 file list 作为第一个参数（仅当 uploadMultiple 被设为 true 时才会发生）

• successmultiple
• completemultiple
• cancelmultiple

　　　　　　特殊事件

• totaluploadprogress：第一个参数为总上传进度，第二个参数为总字节数，第三个参数为总上传字节数。

　　　　使用案例

var myDropzone = new Dropzone("#dropz", {
    url: "/upload", // 文件提交地址
    method: "post",  // 也可用put
    paramName: "file", // 默认为file
    maxFiles: 1,// 一次性上传的文件数量上限
    maxFilesize: 2, // 文件大小，单位：MB
    acceptedFiles: ".jpg,.gif,.png,.jpeg", // 上传的类型
    addRemoveLinks: true,
    parallelUploads: 1,// 一次上传的文件数量
    //previewsContainer:"#preview", // 上传图片的预览窗口
    dictDefaultMessage: '拖动文件至此或者点击上传',
    dictMaxFilesExceeded: "您最多只能上传1个文件！",
    dictResponseError: '文件上传失败!',
    dictInvalidFileType: "文件类型只能是*.jpg,*.gif,*.png,*.jpeg。",
    dictFallbackMessage: "浏览器不受支持",
    dictFileTooBig: "文件过大上传文件最大支持.",
    dictRemoveLinks: "删除",
    dictCancelUpload: "取消",
    init: function () {
        this.on("addedfile", function (file) {
            // 上传文件时触发的事件
        });
        this.on("success", function (file, data) {
            // 上传成功触发的事件
        });
        this.on("error", function (file, data) {
            // 上传失败触发的事件
        });
        this.on("removedfile", function (file) {
            // 删除文件时触发的方法
        });
    }
});

　　

  使用uploadify框架

　　说明

　　　　http://www.uploadify.com/

　　　　Flash Version：需要浏览器安装flash插件

　　　　Html5 Version：需要收费

 

 

　　Options

　　　　auto：是否当图片选中后，直接上传（默认是ture）

　　　　buttonClass：按钮的样式（可以自己直接设置）

　　　　buttonCursor：鼠标放到按钮上的样式

　　　　buttonImage ：按钮的图片，可以将按钮的样式变成一个图片

　　　　buttonText：按钮的文字

　　　　debug：flash是不通过浏览器进行请求的，所以需要dubug需要单独的创建窗口debug

　　　　fileObjName ：相当于<input type="file" name="xxx">中的xxx

　　　　fileSizeLimit：控制文件上传大小

　　　　fileTypeDesc：文件类型提示描述；

　　　　fileTypeExts：控制文件类型

　　　　formData：额外的上传的数据

　　　　height：按钮高度

　　　　width：宽度

　　　　multi：可以上传多个文件（默认是false）

　　　　overrideEvents：表示我需要覆盖你的那些事件，或者我不需要你的那些事件

　　　　swf：指向 uploadify 的文件

　　　　uploader 后台处理请求的url

 

　　基本使用

<div>
	<div>
		<a href="javascript:;" id="uploadBtn1" >上传正面</a>
	</div>
<!--为了图片回显 src是服务器图片的路径地址-->
	<img alt="" src="" class="uploadImg" id="uploadImg1"/>
<!--为了显示图片的地址-->
	<input type="hidden" name="image1" id="uploadImage1"/>
</div>

　　1、回显图片的目的是让用户可以在页面上可以看到自己上传的图片

　　2、页面上隐藏一个地址，是为了在提交表单，Controller处理表单可以拿到用户上传的图片的服务器地址。

        //把上传身份证正面的a标签变成一个uploadify的组件
        $("#uploadBtn1").uploadify({
            buttonText: "身份证正面",
            fileObjName: "file",
            fileTypeDesc: "身份证正面图片",
            fileTypeExts: "*.gif; *.jpg; *.png",
            multi: false,
            swf: "static/js/plugins/uploadify/uploadify.swf",
            uploader: "/realAuthUpload.do",
            overrideEvents: ["onUploadSuccess", "onSelect"],
            onUploadSuccess: function (file, data) {
                $("#uploadImg1").attr("src", data);  //上传图片成功后显示图片
                $("#uploadImage1").val(data);        //上传图片成功后将图片地址放到form表单中，等待和表单一起提交
            }
        });　　

 

 

后端配置

  POM

　　我们可以使用commons-fileupload:commons-fileupload包中的FileUtils来加快我们处理上传文件

<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.2</version>
</dependency>

  配置 spring-mvc.xml

　　需要 Spring 注入 multipartResolver 实例，spring-mvc.xml 增加如下配置：

<!-- 上传文件拦截，设置最大上传文件大小 10M = 10*1024*1024(B) = 10485760 bytes -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <property name="maxUploadSize" value="10485760"/>
</bean>

  控制器关键代码（示例）

package com.funtl.my.shop.web.admin.web.controller;

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 javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;

/**
 * 文件上传控制器
 * <p>Title: UploadController</p>
 * <p>Description: </p>
 *
 * @author Lusifer
 * @version 1.0.0
 * @date 2018/6/27 0:42
 */
@Controller
public class UploadController {

    @ResponseBody
    @RequestMapping(value = "upload", method = RequestMethod.POST)
    public Map<String, Object> upload(MultipartFile dropzFile, HttpServletRequest request) {
        Map<String, Object> result = new HashMap<>();

        // 获取上传的原始文件名
        String fileName = dropzFile.getOriginalFilename();
        // 设置文件上传路径
        String filePath = request.getSession().getServletContext().getRealPath("/static/upload");
        // 获取文件后缀
        String fileSuffix = fileName.substring(fileName.lastIndexOf("."), fileName.length());

        // 判断并创建上传用的文件夹
        File file = new File(filePath);
        if (!file.exists()) {
            file.mkdir();
        }
        // 重新设置文件名为 UUID，以确保唯一
        file = new File(filePath, UUID.randomUUID() + fileSuffix);

        try {
            // 写入文件
            dropzFile.transferTo(file);
        } catch (IOException e) {
            e.printStackTrace();
        }

        // 返回 JSON 数据，这里只带入了文件名
        result.put("fileName", file.getName());

        return result;
    }
}

  下面是实际开发中使用的代码

    @Autowired
    private ServletContext servletContext;
	/**
	 * 千万不要加requiredLogin
	 */
    @ResponseBody
	@PostMapping("realAuthUpload")
	public String realAuthUpload(MultipartFile file) {
		// 先得到basepath
		String basePath = servletContext.getRealPath("/upload");
		String fileName = UploadUtil.upload(file, basePath);
		return "/upload/" + fileName;
	}

　　UploadUtil

/**
 * 上传工具
 *
 * @author Administrator
 */
public class UploadUtil {
    /**
     * 处理文件上传
     *
     * @param basePath 存放文件的目录的绝对路径 servletContext.getRealPath("/upload")
     */
    public static String upload(MultipartFile file, String basePath) {
        String orgFileName = file.getOriginalFilename();
        //FilenameUtils.getExtension(orgFileName)得到文件的扩展名字
        String fileName = UUID.randomUUID().toString() + "."
                + FilenameUtils.getExtension(orgFileName);
        try {
            File targetFile = new File(basePath, fileName);
            FileUtils.writeByteArrayToFile(targetFile, file.getBytes());

            //把文件同步到公共文件夹
            //File publicFile=new File(BidConst.PUBLIC_IMG_SHARE_PATH,fileName);
            //FileUtils.writeByteArrayToFile(publicFile, file.getBytes());
        } catch (IOException e) {
            e.printStackTrace();
        }
        return fileName;
    }
}

  如果不使用FileUtils

    @RequestMapping(value = "/fileupload",method = RequestMethod.POST)
    public String fileupload(MultipartFile file,HttpServletRequest httpServletRequest) throws IOException {
        //获取文件的名字
        String originalFilename = file.getOriginalFilename();
        InputStream inputStream = file.getInputStream();
        String path = httpServletRequest.getSession().getServletContext().getRealPath("/")+originalFilename;
        FileOutputStream fileOutputStream = new FileOutputStream(path,true);
        int len=-1;
        byte[] bytes = new byte[1024];
        while ((inputStream.read(bytes))!=-1){
            fileOutputStream.write(bytes);
        }
        fileOutputStream.close();
        inputStream.close();
        return "login";
    }