简单的前端上传功能实现文件上传到本地，模拟把文件上传到服务器上

最新推荐文章于 2024-07-26 10:04:48 发布

Code神之手

最新推荐文章于 2024-07-26 10:04:48 发布

阅读量3.2k

点赞数 1

分类专栏： fastdfs

本文链接：https://blog.csdn.net/Seven71111/article/details/105512814

版权

fastdfs 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前端代码：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>upload uploadify</title>
        <!--css-->
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
        <link href="../static/css/uploadifive.css" rel="stylesheet" type="text/css" />

    </head>
    <body>
        <div class="container-fluid">
            <!--导航栏-->
            <div class="row">
                <div class="col-md-6">
                    <ul class="nav nav-pills">
                        <li role="presentation" class="active"><a href="#">Home</a></li>
                        <li role="presentation"><a href="#">Profile</a></li>
                        <li role="presentation"><a href="#">Messages</a></li>
                    </ul>
                </div>
                <div class="col-md-6">
                    <ul class="nav nav-pills" style="float: right">
                        <li role="presentation" class="active"><a href="#">登录</a></li>
                        <li role="presentation"><a href="#">注册</a></li>
                    </ul>
                </div>
            </div>
            <!--内容-->
            <div class="row">
                <div class="col-md-3"></div>
                <div class="col-md-2" style="float: left">
                    <!--文件上传-->
                    <form action="/file/upload" method="post" enctype="multipart/form-data">
                        <div class="form-group">
                            <label>File input</label>
                            <input type="file" id="file" name="file">
                        </div>
                        <button type="submit" class="btn btn-default">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </body>
<footer>
    <!--jq-->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!--bootstrap-->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="../static/js/jquery.uploadifive.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
                
        })
    </script>
</footer>
</html>

后端

package com.ldgroup.demo.thymeleaf_bootstrap.controller;

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
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;

/**
 * @Description
 * @Author by mocar小师兄
 * @Date 2020/4/14 
 **/
@RestController
@RequestMapping("/file")
public class UploadFileController {
    @PostMapping("/upload")
    public String upload(@RequestParam("file") MultipartFile file){
        if (file==null){
            return "upload false";
        }
        try {
            String filename = file.getOriginalFilename();
            String extFileName = filename.substring(filename.lastIndexOf("." ) +1,filename.length());
            System.out.println("文件名:\t"+filename);
            System.out.println("后缀名:\t"+extFileName);

            //上传到本地,模拟上传到fastdfs文件服务器
            String filePath= "E:\\fastdfs\\";
            String path = filePath + filename;
            //文件存储路径
            File dest = new File(path);
            if (!dest.getParentFile().exists()){
                dest.getParentFile().mkdir();
            }
            file.transferTo(dest);
            return "upload success";
        } catch (IOException e) {
            e.printStackTrace();
        }
        return "upload false";
    }

}