ssm框架简单的文件上传

最新推荐文章于 2023-07-11 14:55:23 发布

喝杯星巴克

最新推荐文章于 2023-07-11 14:55:23 发布

阅读量85

点赞数

文章标签： java css html

本文链接：https://blog.csdn.net/qq_59033587/article/details/120753924

版权

ssm框架搭建完毕，前后端分离要导入json依赖

<!--  jackson 前后端分离-->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.13.0-rc2</version>
    </dependency>

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

在spring容器中注入

<!--    文件上传-->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"/>

静态文件处理，在spring-mvc容器中注入

<!--  静态资源处理  -->
    <mvc:resources location="/static/" mapping="/static/**"></mvc:resources>

接口

@RestController
public class FilerUploderController {
    @RequestMapping("/uploader/file")
    public String uploader(MultipartFile tx,String name) throws IOException {
        tx.transferTo(new File("d://" + UUID.randomUUID() + tx.getOriginalFilename().substring(tx.getOriginalFilename().lastIndexOf("."))));
        return "上传成功";
    }

}

前端页面，有两种方式，注意：html，js，jQuery，jquery.form.js 必须都在静态文件夹下

1、不用插件的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

       上传文件：<input type="file" id="tx" name="tx"><br>
        姓名：<input type="text" id="name"><br>
        <input type="button" value="上传文件" onclick="uploader()">



    <script src="js/jquery-3.6.0.js"></script>
    <script>
        function uploader(){
            var files=$("#tx").prop("files");
            var data = new FormData();
            data.append("tx",files[0]);
            data.append("name",name);
            $.ajax({
                url:"/uploader/file",
                type:"post",
                data:data,
                cache:false,
                processData:false,  // 不处理数据
                contentType:false,  // 不设置内容类型
                success:function (resp){
                    alert(resp)
                }

            })
        }
    </script>

</body>
</html>

2、用插件的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
      <form id="tt" method="post" enctype="multipart/form-data">
          上传文件：<input type="file" id="tx" name="tx"><br>
          姓名：<input type="text" id="name"><br>
          <input type="button" value="上传文件" onclick="uploader()">
      </form>

        <script src="js/jquery-3.6.0.js"></script>
        <script src="js/jquery.form.js"></script>

<script>
    function uploader(){
            var option={
                url:"/uploader/file",
                success:function (resp){
                    alert(resp)
                }
            }
            $("#tt").ajaxSubmit(option)
    }
</script>
</body>
</html>

喝杯星巴克

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ssm框架简单的文件上传

ssm框架搭建完毕，前后端分离要导入json依赖 <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.13.0-rc2</version> &
复制链接

扫一扫