springboot和jquery.form.js实现监听文件上传进度

springboot和jquery.form.js实现监听文件上传进度 说明

文件上传作为程序开发最常用的功能之一，上传进度展示也是必须的。但是有时候进度并不准，进度100%了实际上后台尚未接收完毕，本篇就介绍如何利用jquery的form插件来实时反馈文件上传进度。

实现效果

注意：最后100%停了一下才出现返回结果，因为服务器端在将二进制流写入到磁盘中耗费了点时间。

关于jquery.form

1.这个框架集合form提交、验证、上传的功能。
2.这个框架必须和jquery完整版结合，否则使用min则无效。
原理：利用js进行对form进行组装成ajax的url和data，原理还是用ajax来提交，其实这完全可以自己写，但是有这个框架可能会更简单。

• 支持的功能有：
  -ajaxForm
  -ajaxSubmit
• formToArray
• formSerialize
• fieldSerialize
• fieldValue
• clearForm
• clearFields
• resetForm

详细用法请参考：https://jquery.malsup.com/form/

开发步骤 1.文件上传类

@Controller
@RequestMapping("/api/file")
public class FileUploadController {
    @RequestMapping(value="/upload", method=RequestMethod.POST )
    @ResponseBody
    public Map uploadFile(@RequestParam("fileItem") MultipartFile fileItem )
    {

        String filename = fileItem.getOriginalFilename();
        try {
            byte[] fileBytes = fileItem.getBytes();
            Files.write(Paths.get("D:\tmp\" + fileItem.getOriginalFilename()), fileBytes);
        } catch (IOException e) {
            e.printStackTrace();

        }
        Map result = new HashMap<>();
        result.put("code",200);
        result.put("message",filename+"上传成功！");

        return result;
    }
}

2.前端页面

    
    
    

    
    
    
    

    


    jquery.form方式展示文件上传进度
欢迎分享，转载请注明来源：内存溢出
原文地址:https://54852.com/zaji/5481197.html