ajax实现文件上传

发布时间 2024-01-10 16:07:56作者: 码小白很犇

ajax上传文件

上传文件我一般采用form表单上传,form简单

form上传文件

<form id="jsSubmit" method="post" action="url" enctype="multipart/form-data">
    <input type="file"  name="file" />   
</form>
<!--
           $("#jsSubmit").form.submit();
    -->

开发过程中如果是先将图片上传上去,在提交其他数据
form没有回调函数(还有个问题上传完成之后导致页面跳转)

ajax上传文件(js代码)

var formData = new FormData();
formData.append("file",$('#input-file-id')[0].files[0]);
//其他参数 继续 append
formData.append("其他参数",$("input[name='其他参数']").val());
$.ajax({
    type:"post",
    url:ctx + "pubServe/owner/uploadFile",
    data:formData,
    contentType:false,
    processData:false,
    success:function(result){
        //请发送成功回调函数

    },
    error:function(){
        //错误
    }
});

java后端处理

@PostMapping("/url")
public String firstImg(@RequestParam("file") MultipartFile file,String other) {
    //业务逻辑
}