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

最新推荐文章于 2022-11-21 11:34:09 发布

_我走路带风

最新推荐文章于 2022-11-21 11:34:09 发布

阅读量409

点赞数 1

分类专栏：后台开发 java_web 最菜前端前来报到

后台开发同时被 3 个专栏收录

131 篇文章 1 订阅

订阅专栏

java_web

89 篇文章 0 订阅

订阅专栏

最菜前端前来报到

15 篇文章 1 订阅

订阅专栏

今天来学习一下在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没啥关系了。


<%--
  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>

controller


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";
    }
}

原文：https://blog.csdn.net/Mr__Viking/article/details/80866626

_我走路带风

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在SSM框架中使用AJAX实现多文件上传

今天来学习一下在SSM框架中使用ajax实现文件的上传。1.首先我们需要一个搭建好的SSM框架项目，这个在这篇文章里不是重点，自行先搭建好需要的项目。这里我是用的jsp页面来和后台接口关联，在jsp文件中我们需要一个form表单，请求方法为POST,enctype="multipart/form-data",设置这样的一些属性，在表单的子标签里面要一个type=“file”的input标签；像...
复制链接

扫一扫