java web前端上传文件到后台常用的几种方式

一引言

小编目前工作内容属于和第三方做接口对接，突然调换到开发产品组，需要做一个拍照上传身份证照片到后台识别的功能。一个很简单的功能，当我做到需要上传图片到后台的时候，突然感觉对上传文件的思路很乱，不知该使用什么方式来实现。所以今天小编我来总结上传文件的几种方式，屡屡自己的思路。

二常用的几种方式

1、使用form表单提交

这种方式是最简单明了的，直接用表单提交。记得添加enctype属性哟，这个属性是指定form表单在向服务器提交之前，对表单数据如何进行编码。文件域中的name="file"属性的值，需要和后台接收的对象名一致，不然接收不到的。

<form action="/api/fileupload/dome1" id="domeform" method="post" enctype="multipart/form-data">
    <input type="file" name="file" value="选择文件">
    <input type="submit" value="表单提交">
    <input type="button" value="ajax提交" id="ajaxsub">
    <input type="button" value="formdata提交" id="ormdatasub">
</form>

2、使用ajax提交文件

在项目当中难免避免异步提交文件，或者是需要局部刷新，这个时候我们就需要使用到ajax来实现。

使用ajax提交首先引入jquery-form.js文件才能实现，接着使用上面的html代码，加入以js则可以实现ajax提交文件

<script type="text/javascript">
    $(function(){
       $("#ajaxsub").click(function(){
            $("#domeform").ajaxSubmit({
                url: "/api/fileupload/dome1",
                type: "POST",
                dataType: "json",
                success: function (res) {
                    //处理成功后的业务逻辑
                }
            })
        })
    })
</script>

3、使用FormData对象

如果不想引入其他js文件，那就使用这种方式吧，也是通过ajax的形式上传。

/**
 * 使用FormData
 */
$("#ormdatasub").click(function(){
    var formdata = new FormData($("#domeform")[0]);
    $.ajax({
        url: "/api/fileupload/dome1",
        type: "POST",
        data:formdata,
        dataType: "json",
        processData: false,  // 告诉jQuery不要去处理发送的数据
        contentType: false,   // 告诉jQuery不要去设置Content-Type请求头
        success: function (res) {
        }
    })
})

4、后台接收文件，框架采用的Spring Boot 微服务框架，因为该框架搭建很方便所以采用这个框架写例子。

package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;

@Controller
@RequestMapping(value = "/api/fileupload")
public class FileuploadController {


    /**
     * 用于接收前端上传文件
     * @param request
     * @param file
     */
    @RequestMapping(value = "dome1", method = RequestMethod.POST)
    public void dome1(HttpServletRequest request, MultipartFile file) throws Exception{
        //file对象名记得和前端name属性值一致
        System.out.println(file.getOriginalFilename());
    }
}

有需要整个dome的点击这里进行下载，后期遇到常用的上传文件的方式，也会即使更新。

java web前端上传文件到后台常用的几种方式

猜你喜欢