关于Bootstrap-Fileinput文件同步上传的问题

原创

已于 2022-11-21 10:39:12 修改 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #javascript #前端 #java

于 2022-11-10 21:40:44 首次发布

Bootstrap Fileinput文件异步上传

在做一些文件上传功能的时候，使用到了Bootstrap-Fileinput控件，在使用过程中，由于我自己特殊的使用场景，之前的文件上传是异步的，异步的好处就是流畅，当然了，如果选中的文件多的情况下异步是比较流畅的，如果是单纯的一个文件，那么，同步和异步就都无所谓了，先看一下如果是异步上传，请求和响应的内容是什么样的
请求响应的内容
可以看到，当上传方式为异步的时候，如果选中了多个文件，发送的请求就是多次，响应的结果也是多次，一个文件请求一次，这样的好处当然就是快咯，因为异步本身就是不阻塞浏览器，当为同步的时候就会阻塞浏览器了。BootStrap-Fileinput本身如果不进行配置的话，默认使用的也是异步上传，好了，看完异步上传之后，接下来就到了重头戏，同步上传。

Bootstrap Fileinput文件同步上传

为什么要使用同步上传呢，前面也提到了，就是如果为异步上传，前端处理文件信息业务逻辑复杂的时候非常麻烦，因为每一个文件响应一次，如果文件路径本身就是多个文件拼接的，比如需要上传多个节点的文件，文件用#@#分割或者一些其他的能容易识别的分隔符分割，而且分割之后的文件路径还要用逗号分隔的时候，业务逻辑复杂度可想而知，虽然前端写好就行了，但是一个文件响应一次，就要分割两次，还要将分割好之后的文件路径重新拼接，而且分割之前还要判断是否已经存在了路径，如果前端来不及处理，后台就响应回来可能会导致数据处理错乱，算了，不想回忆痛苦的经历了，直接开整。索性直接写一个多个文件响应一次，在bootstrap-fileinput里面配置一下就行了，配置一下 “uploadAsync” 属性为：false；就行

            control.fileinput({
   
   
                language: 'zh', //设置语言
                showZoom: true,
                uploadAsync: false,//同步上传，重点在这
                uploadUrl: uploadUrl, //上传的地址
                allowedFileExtensions: ['pdf', 'jpg', 'jpeg', 'png', 'gif', 'pptx', 'ppt', 'xls', 'xlsx', 'doc', 'docx', 'mp4'],//接收的文件后缀
                showUpload: false, //是否显示上传按钮
                showCaption: true,//是否显示标题
                browseClass: "btn btn-default", //按钮样式
                dropZoneEnabled: false,//是否显示拖拽区域
                maxFileSize: 5120,//单位为kb，如果为0表示不限制文件大小
                minFileCount: 0,