多图片上传springmvc终极解决办法

最新推荐文章于 2024-03-28 17:36:13 发布

qq_39205291

最新推荐文章于 2024-03-28 17:36:13 发布

阅读量618

点赞数

分类专栏：笔记文章标签： js

本文链接：https://blog.csdn.net/qq_39205291/article/details/79260149

版权

笔记专栏收录该内容

34 篇文章 0 订阅

订阅专栏

jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
    <form action="${pageContext.request.contextPath}/user/uploadPic" method="post" enctype="multipart/form-data" id="tf">
        <img id="picture1" style="width:102px;height:126px;" οnclick="selectFile(1);" title="图1">
        <input id="image1" name="image" type="file" style="display:none" class="img_upload_file">
        <img id="picture2" style="width:102px;height:126px;" οnclick="selectFile(2);" title="图2">
        <input id="image2" name="image" type="file" style="display:none" class="img_upload_file">
        <img id="picture3" style="width:102px;height:126px;" οnclick="selectFile(3);" title="图3">
        <input id="image3" name="image" type="file" style="display:none" class="img_upload_file">
        <input type="button" οnclick="test()" value="提交"/>
    </form>
</body>
</html>

<script>
    function selectFile(i){
        $("#image"+i).trigger("click");
    }
    $("#image1").change(function() {
        var file = this.files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(e) {
            $("#picture1").attr("src", this.result);
        };
    });
    $("#image2").change(function() {
        var file = this.files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(e) {
            $("#picture2").attr("src", this.result);
        };
    });
    $("#image3").change(function() {
        var file = this.files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(e) {
            $("#picture3").attr("src", this.result);
        };
    });

    function test(){
        var form = new FormData(document.getElementById("tf"));
        $.ajax({
            url:"${pageContext.request.contextPath}/user/uploadPic",
            type:"post",
            data:form,
            processData:false,
            contentType:false,
            success:function(data){
                console.log(data);
            },
            error:function(e){

            }
        });
    }
</script>

@RequestMapping(value="/uploadPic",method = RequestMethod.POST)
@ResponseBody
public Map selectUser(@RequestParam("image") MultipartFile[] files, HttpServletResponse response, Model model) throws IOException{
        String rootPath = System.getProperty("user.dir");
        for (MultipartFile file : files) {

            long l = System.currentTimeMillis();
            File dir = new File(rootPath+"/image");
            if(!dir.exists()){
                dir.mkdirs();
            }
            File f = new File(rootPath+"/image"+"/"+l+file.getOriginalFilename());
            //调用SpringMVC的图片保存方法
            file.transferTo(f);
            //自己使用IO流来做数据传输
//            byte[] by = new byte[1024];
//            InputStream inputStream = file.getInputStream();
//            FileOutputStream fileOutputStream = new FileOutputStream(f);
//            while(inputStream.read(by)!=-1){
//                fileOutputStream.write(by);
//            }
//            inputStream.close();
//            fileOutputStream.close();
        }
        Map<String,Object> ma = new java.util.HashMap<>();
        ma.put("state","00");
        return ma;
    }

qq_39205291

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
多图片上传springmvc终极解决办法

jsp&lt;%@ page contentType="text/html;charset=UTF-8" language="java" %&gt;&lt;%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %&gt;&lt;html&gt;&lt;head&gt; &l
复制链接

扫一扫

专栏目录