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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/weixin_38111957/article/details/80864883

一、引言

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

二、常用的几种方式

    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的点击这里进行下载,后期遇到常用的上传文件的方式,也会即使更新。

展开阅读全文

没有更多推荐了,返回首页