关于文件上传只能用表单提交而不能异步提交的问题

墨蓝 2022-06-02 05:40 305阅读 0赞

**1.文件（图片/文档）上传就spring自带上传工具而言，只能用表单提交submit方式进行，不能使用ajax异步提交表单，因为异步提交之后input标签的内容就被springMVC解析成了字符串，无法获取文件名称和地址。页面如下：**

`form name="fileForm" id="fileForm" action="/manage/img/upload" method="post" enctype="multipart/form-data"> <table> <tr> <td align="right"> <label style="font-size: 15px;">添加图片：</label> </td> <td> <input type="file" name="file"> <button type="button" onclick="uploadFormSubmit();">上传</button> </td> </tr> </table> </form>`

2.js代码如下：

function uploadFormSubmit(){

var fo = document.getElementsByName("fileForm");  $(fo).submit();

\} 3.当然可以用多种方式去提交表单，但是ajax异步请求不行。后台代码如下（input之所以

type="file" name="file"  因为后台会有一个专门的file文件类去接收上传的文件，框架封装）：@RequestMapping(value = "/manage/img/upload",method = RequestMethod.POST)
    public Object imgUpload(@RequestParam("file") CommonsMultipartFile file){
    
        logger.info("=====上传图片=====图片:"+file);
        String path="D:/"+file.getOriginalFilename();
        File newFile=new File(path);
        //通过CommonsMultipartFile的方法直接写文件（注意这个时候）
        try{
            file.transferTo(newFile);
        }catch (Exception e){
        }
        return path;
    }

4.如此就遇到一个尴尬的场面，当你存储完文件之后，想返回存储路径到当前页面时，发现根本跳不过去，异步请求又不行，如此求助各路大牛终于找到解决办法：

**1）引入js文件 jQuery-form.js文件（官网可以下载，或者加入下面的群群文件有）；**

**2）页面js代码改造：**

3）如此就获取到后台返回的文件存储路径img\_url

**如有披露或问题欢迎留言或者入群探讨**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDcwNzMz_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDcwNzMz_size_16_color_FFFFFF_t_70]: /images/20220602/2ab0eafe7454435882c3b42ca02677b8.png