MVC单文件与多文件上传学习笔记

最新推荐文章于 2022-11-15 17:29:18 发布

懵懵懂懂程序员

最新推荐文章于 2022-11-15 17:29:18 发布

阅读量121

点赞数

分类专栏：文件上传

本文链接：https://blog.csdn.net/weixin_44600430/article/details/103290708

版权

文件上传专栏收录该内容

2 篇文章 0 订阅

订阅专栏

`MVC`单文件与多文件上传学习笔记(2019-11-04):

`pom`文件依赖:

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

配置文件(`springmvc.xml`):

<!-- 配置多媒体解析器 -->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="defaultEncoding" value="UTF-8"></property>
        <!-- 设定文件上传的最大值100MB，100*1024*1024 -->
        <property name="maxUploadSize" value="104857600"></property>
    </bean>

单文件上传:

页面:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人文件上传test网站</title>
</head>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<body>
    <!--必须是表单包起来  有name属性 而且name属性必须和后端接收的参数名一样-->
    <form id="inputForm">
        <input type="file" name="updateUrl" onchange="updatefile()">
    </form>
    <div>
        <table>
            <tr>
                <td id="tset">
                    <!--回显上传后的连接-->
                </td>
            </tr>
        </table>
    </div>
</body>
    
    
<script type="text/javascript">
    function updatefile() {
        var formData = new FormData($("#inputForm")[0]);
        $.ajax({
            url: "/test/updatefile",
            async: false,
            type: "POST",
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function (updateVersionFile) {
                 //插入个 a标签 回显示地址
                $("#tset").html("<a href=\""+updateVersionFile+"\">点击查看</a>");
            }
        });
    }
</script>
</html>

后端代码:

	/**
     * 单个文件上传
     * @param multipartFile的名称 如果不使用注解 必须得和页面的name一样
     * @return
     */
 @PostMapping("/updatefile")
    public String getlist(@RequestParam(value = "updateUrl", required = false) MultipartFile multipartFile){
        InputStream inputStream=null;
        try {
            inputStream = multipartFile.getInputStream();
        } catch (IOException e) {
            e.printStackTrace();
        }
        //自己进行上传云服务器获取地址后返回
        return url;
    }

单独使用`<input type="file" name="updateUrl" onchange="updatefile()">` 上传方式不用表单

function updatefile() {
        var formData = new FormData();
        //jquery获取选择文件选项转换成js对象
        var file = $("#updateUrl")[0];
        //添加进去formData  updateUrl要和后端接收名一样
        formData.append("updateUrl",file.files[0]);
        $.ajax({
            url: "/updatefile",
            async: false,
            type: "POST",
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function (updateVersionFile) {
                //插入个 a标签 回显示地址
                $("#tset").html("<a href=\""+updateVersionFile+"\">点击查看</a>");
            }
        });
    }

多文件上传:

页面:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人文件上传test网站2</title>
</head>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<body>
        <!--3个文件框 name属性必须相同  id不同用来取值-->
        <input type="file" name="updateUrl" id="updateUrl1">
        <input type="file" name="updateUrl" id="updateUrl2">
        <input type="file" name="updateUrl" id="updateUrl3">
        <button onclick="updatefile()">点击多文件上传</button>
</body>
<script type="text/javascript">

    function updatefile() {
        //根据不同id 取出每一个文件的值 添加进formData表单格式相同
        var formData =  new FormData();
        //但是key 必须是相同
        formData.append("updateUrl",$("#updateUrl1")[0].files[0])
        formData.append("updateUrl",$("#updateUrl2")[0].files[0])
        formData.append("updateUrl",$("#updateUrl3")[0].files[0])
        $.ajax({
            url: "/updatefile2",
            async: false,
            type: "POST",
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function (result) {
                alert("上传成功!"+result);
            }
        });
    }
</script>
</html>

后端使用数组接收:

	/**
     * 多个文件上传
     * @param multipartFile[] 使用数组接收 名字和formData的key一样 即可
     * @return
     * @throws IOException
     */
    @PostMapping("/updatefile2")
    public String multiFile(@RequestParam(value = "updateUrl", required = false) MultipartFile[] multipartFile) throws IOException {
        for (MultipartFile file : multipartFile) {
            System.out.println(file.getSize());
            System.out.println(file.getOriginalFilename());
            System.out.println(file.getInputStream());
        }
        return "success";
    }
    /*输出结果:
    7685829
    Coffee_Android-v1.9-360.apk
    java.io.FileInputStream@7d9e7ef0
    17369219
    EWater-v2.0.1.0-release.apk
    java.io.FileInputStream@443fe880
    14672727
    test.apk
    java.io.FileInputStream@79707c66*/

页面也可以使用表单提交:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <!--3个文件框 name属性必须相同 表单属性必须 enctype="multipart/form-data"-->
    <form action="${pageContext.request.contextPath }/multifile"
        method="post" enctype="multipart/form-data">
        选择文件1：<input type="file" name="myfile"><br>
        文件描述1：<input type="text" name="description"><br />
        选择文件2：<input type="file" name="myfile"><br>
        文件描述2：<input type="text" name="description"><br />
        选择文件3：<input type="file" name="myfile"><br>
        文件描述3：<input type="text" name="description"><br />
        <input type="submit" value="提交">
    </form>
</body>
</html>

懵懵懂懂程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
MVC单文件与多文件上传学习笔记

MVC单文件与多文件上传学习笔记(2019-11-04):pom文件依赖: <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>1.3.2</version&...
复制链接

扫一扫