js获取表单中input的文件，通过ajax发送给后台

最新推荐文章于 2024-07-12 15:49:20 发布

飞来的贼

最新推荐文章于 2024-07-12 15:49:20 发布

阅读量1w

点赞数 1

分类专栏： jeesite

本文链接：https://blog.csdn.net/ASZJBGD/article/details/82501733

版权

jeesite 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

经历了三个人的努力最终还是发送过去了，网上许多方法不知道什么原因总是获取不到表单中的文件。

form代码

<form enctype="multipart/form-data" action="/data/upload/" method="POST" id="upload-form">
    <input type="text" name="orgId" id="orgId"/>
    <br/>
    <input type="file" name="upload" id="upload"/>
    <br/>
    <span id="submited">上传</span>
</form>

JS（如果出现放在head加载不了，可以放到最下面）

<script type="text/javascript">
    $("#submited").click(function(){

        var files = document.getElementById("upload").files;
        console.log(files);
        var formdata = new FormData();
        formdata.append("upload",files[0])
        $.ajax({
            url:"${ctx}/import",
            type:"post",
            data:formdata,
            contentType:false, //- 必须false才会自动加上正确的Content-Type
            processData: false, //- 必须false才会避开jQuery对 formdata 的默认处理,XMLHttpRequest会对 formdata 进行正确的处理
            success:function(res){
                res=JSON.parse(res);
                if (res.success){
                    alert("ok");
                }else {
                    alert(res.content)
                }
            },
            error:function(){
                alert("请上传xls表格数据");
            }
        });
    });
</script>

Controller

    @RequestMapping(value = "import",method = RequestMethod.POST )
    public void importFile(@RequestParam(value = "upload", required = false) MultipartFile upload){