Ajax实现文件上传(Spring MVC)

最新推荐文章于 2021-08-05 16:27:15 发布

一阵雄风

最新推荐文章于 2021-08-05 16:27:15 发布

阅读量336

点赞数

分类专栏：前端笔记文章标签： ajax

本文链接：https://blog.csdn.net/A9541170/article/details/104722070

版权

前端笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

前端表单和 JQuery jsp/html代码

使用JQury

    <script src="static/js/jquery-3.4.1.js"></script>

前端表单

<form id="form-avatar" enctype="multipart/form-data">
    <p>请选择要上传的文件：</p>
    
    <p><input type="file" name="file" id=InputFile /></p>
    <p><input id="btn-avatar" type="button" value="上传" /></p>
</form>

ajax请求服务器

<script>


    function uploadfile(){
		var $file = $("#InputFile").val();//用户文件内容(文件)
            // 判断文件是否为空
            if ($file == "") {
                alert("请选择上传的目标文件! ")
                return false;
            }
            //判断文件类型,我这里根据业务需求判断的是Excel文件
            var fileName1 = $file.substring($file.lastIndexOf(".") + 1).toLowerCase();
            if (fileName1 != "xls" && fileName1 != "xlsx") {
                alert("请选择Execl文件!");
                return false;
            }
            //判断文件大小
            var size1 = $("#InputFile")[0].files[0].size;
            if (size1 > 104857600) {
                alert("上传文件不能大于100M!");
                return false;
            }
            var f = false;
            $.each(JSON.parse(filenames), function (index, value) {
                if (value == getFileName($file2)) {
                    f = true;
                }
            });

            if (f == true) {
                alert("文件已存在,请勿重复上传");
                return false;
            }
            alert("上传中...请稍后");
        $.ajax({
            url : "/url/upload",
            data: new FormData($("#form-avatar")[0]),
            type : "POST",
            // 告诉jQuery不要去处理发送的数据，用于对data参数进行序列化处理 这里必须false
            processData : false,
            // 告诉jQuery不要去设置Content-Type请求头
            contentType : false,

            success : function(json) {
                alert("执行成功");
            },
            error : function(json) {
                alert("执行失败");

            }
        });
    }
    $("#btn-avatar").on("click",uploadfile);
</script>

Conroller.java

@PostMapping("/upload")
    public void  fileUpload2(@RequestParam("file") CommonsMultipartFile file, HttpServletRequest request) throws IOException {
        System.out.println("走了");
        //上传路径保存设置
        String path = request.getServletContext().getRealPath("/upload");
        File realPath = new File(path);
        if (!realPath.exists()) {
            realPath.mkdir();
        }
        //上传文件地址
        System.out.println("上传文件保存地址：" + realPath);

        //通过CommonsMultipartFile的方法直接写文件（注意这个时候）
        file.transferTo(new File(realPath + "/" + file.getOriginalFilename()));

    }