在SSM框架中使用AJAX实现多文件上传

今天来学习一下在SSM框架中使用ajax实现文件的上传。

1.首先我们需要一个搭建好的SSM框架项目，这个在这篇文章里不是重点，自行先搭建好需要的项目。

这里我是用的jsp页面来和后台接口关联，在jsp文件中我们需要一个form表单，请求方法为POST,enctype="multipart/form-data",设置这样的一些属性，在表单的子标签里面要一个type=“file”的input标签；像这样的<input type="file" id="file" name="file"/> ，当然也可以指定multiple="multiple"，这样就可以支持多个文件的上传了。除了file类型的标签，我们还需要一个辅助的标签来响应ajax请求，一般来说就是用最简单的button类型的input标签了，记住这里的ipnut标签的类型不能写submit，否则就直接是表单的提交了，和咱们的ajax没啥关系了。

我这里使用了jquery的库，所以导了一个jquery的js包

<script type="text/javascript" src="../lib/js/jquery-1.9.0.min.js"></script>

下面的就直接贴JSP代码吧，方便直观！

<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2018/6/28
  Time: 20:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <script type="text/javascript" src="../lib/js/jquery-1.9.0.min.js"></script>
    <title>文件上传</title>
</head>
<body>
    <div style="align-items: center;align-content: center;">
        <h1>文件上传</h1>
        <form id="form" method="post" enctype="multipart/form-data">
            <p>请选择要上传的文件:</p>
            <input id="file" name="file" type="file" multiple="multiple"/>
            <br>
            <input id="upload" name="upload" type="button" value="上传">
        </form>
    </div>
</body>
<script>
    $(window).ready(function () {
        $("#upload").click(function () {
           var formData = new FormData($('#form')[0]);//获取表单中的文件
           //ajax请求
           $.ajax({
               url:"/file/upload",//后台的接口地址
               type:"post",//post请求方式
               data:formData,//参数
               cache: false,
               processData: false,
               contentType: false,
               success:function (data) {
                   alert(data);
               },error:function () {
                   alert("操作失败~");
               }
           })
        });
    });
</script>
</html>

再看下前面的JSP页面运行后长啥样吧！

好了，前面的事情做完了，接着来说说后台的处理。

2.编写文件上传的后台处理接口，咱们使用的SSM框架，所以只需要在controller层写一个uploadFileController类就行了，这个地方也没啥好说的直接看代码和注释吧！

package com.ssm.controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;

/**
 * created by viking 2018/06/28
 * 文件上传接口
 */
@RestController
@RequestMapping("file")
public class UploadFileController {

    @RequestMapping(value = "upload", method = RequestMethod.POST)
    public String upload(@RequestParam("file") MultipartFile[] files){//支持多个文件的上传
        //实例化一个文件存放的目录地址
        String dir = "F:/uploadFile/";
        for (MultipartFile file : files){
            System.out.println("文件类型:"+file.getContentType());
            String filename = file.getOriginalFilename();
            String suffix = filename.substring(filename.length() - 3);
            System.out.println("文件名:"+filename);
            System.out.println("文件后缀:"+suffix);
            System.out.println("文件大小:"+file.getSize()/1024+"KB");
            //创建要保存文件的路径
            File dirFile = new File(dir,filename);
            if (!dirFile.exists()){
                dirFile.mkdirs();
            }
            try {
                //将文件写入创建的路径
                file.transferTo(dirFile);
                System.out.println("文件保存成功~");
            } catch (IOException e) {
                e.printStackTrace();
            }


        }
        return "OK";
    }
}

运行一下，试试上传的结果。

如图所示：

文件所在目录的结果：

结果完美的将我们上传的文件保存在本地了。

大概就是这些了，如果大家觉得有问题的地方可以留言，我们一起讨论。

如果有不正确的地方欢迎各路大神指教~~

在SSM框架中使用AJAX实现多文件上传

猜你喜欢