thymeleaf,bootstrap-fileinput 多文件上传

组件遍历上传

一、前端

html 复制代码
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改固定资产信息')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: bootstrap-fileinput-css"/>
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-gdzcxx-edit" th:object="${bizGdzcxx}">
            <input name="gdzcxxId" th:field="*{gdzcxxId}" type="hidden">
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">资产名称:</label>
                <div class="col-sm-8">
                    <input name="zcmc" th:field="*{zcmc}" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">资产型号:</label>
                <div class="col-sm-8">
                    <input name="zcxh" th:field="*{zcxh}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">资产照片:</label>
                <div class="col-sm-8">
                    <input type="text" name="zczp" th:field="*{zczp}">
                    <div class="file-loading">
                        <input class="form-control file-upload" id="zczp" name="file" type="file" multiple>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <th:block th:include="include :: bootstrap-fileinput-js"/>
    <script th:inline="javascript">
        var prefix = ctx + "biz/gdzcxx";
        $("#form-gdzcxx-edit").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/edit", $('#form-gdzcxx-edit').serialize());
            }
        }
        $(".file-upload").each(function (i) {
            var val = $("input[name='" + this.id + "']").val();
            var preView = val.split(',');
            $(this).fileinput({
                'uploadUrl': ctx + 'common/upload',
                initialPreviewAsData: true,
                initialPreview: preView,
                maxFileCount: 10,
                maxFileSize: 1000,
                autoReplace: true
            }).on('fileuploaded', function (event, data, previewId, index) {
                //多文件上传后,将文件名路径用","拼接起来
                if(data.response.fileName){
                    var filenames = data.response.fileName;
                    var currentFilename = $("input[name='" + event.currentTarget.id + "']").val();
                    if(currentFilename!=''){
                        filenames = currentFilename +',' +filenames;
                    }
                    $("input[name='" + event.currentTarget.id + "']").val(filenames);
                }
            }).on('fileremoved', function (event, id, index) {
                var fileIndex = index.replace('init-','');
                var currentFilename = $("input[name='" + event.currentTarget.id + "']").val();
                var fileNames = currentFilename.split(',');
                var lastFileNames = '';
                for(var i in fileNames){
                    if(i == parseInt(fileIndex)){
                        continue;
                    }
                    lastFileNames += fileNames[i]+',';
                }
                lastFileNames = lastFileNames.split(',').slice(0,-1).join(',');
                $("input[name='" + event.currentTarget.id + "']").val(lastFileNames);
            })
            $(this).fileinput('_initFileActions');
        });
    </script>
</body>
</html>

二、后端

java 复制代码
@Controller
@RequestMapping("/common")
public class CommonController
{
    private static final Logger log = LoggerFactory.getLogger(CommonController.class);

    @Autowired
    private ServerConfig serverConfig;
    

    /**
     * 通用上传请求(单个)
     */
    @PostMapping("/upload")
    @ResponseBody
    public AjaxResult uploadFile(MultipartFile file) throws Exception
    {
        try
        {
            // 上传文件路径
            String filePath = "D:/upload";
            // 上传并返回新文件名称
            String fileName = FileUploadUtils.upload(filePath, file);
            String url = serverConfig.getUrl() + fileName;
            AjaxResult ajax = AjaxResult.success();
            ajax.put("url", url);
            ajax.put("fileName", fileName);
            ajax.put("newFileName", FileUtils.getName(fileName));
            ajax.put("originalFilename", file.getOriginalFilename());
            return ajax;
        }
        catch (Exception e)
        {
            return AjaxResult.error(e.getMessage());
        }
    }
}
java 复制代码
@Component
public class ServerConfig
{
    /**
     * 获取完整的请求路径,包括:域名,端口,上下文访问路径
     * 
     * @return 服务地址
     */
    public String getUrl()
    {
        HttpServletRequest request = ServletUtils.getRequest();
        return getDomain(request);
    }

    public static String getDomain(HttpServletRequest request)
    {
        StringBuffer url = request.getRequestURL();
        String contextPath = request.getServletContext().getContextPath();
        return url.delete(url.length() - request.getRequestURI().length(), url.length()).append(contextPath).toString();
    }
}
相关推荐
y先森2 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy2 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189112 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿4 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡5 小时前
commitlint校验git提交信息
前端
emmm4595 小时前
html兼容性问题处理
html
虾球xz5 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇5 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒5 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员5 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js