SpringMVC+bootstrap-fileinput文件上傳插件使用入門

項目須要使用了一款強大的bootstrap文件上傳插件bootstrap-fileinput，https://github.com/kartik-v/bootstrap-fileinput/

官網上的文檔介紹比較精煉，本身的使用也比較淺，簡單記錄使用該控件的經驗。後臺使用SpingMVC。

截圖:

控件元素代碼：

<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap-fileinput/js/plugins/piexif.min.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap-fileinput/js/plugins/purify.min.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap-fileinput/js/plugins/sortable.min.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap-fileinput/js/fileinput.min.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap-fileinput/themes/fa/theme.min.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap-fileinput/js/locales/zh.js"></script>

<input id="fileinput" name="fileinput[]" type="file" multiple class="file-loading" data-preview-file-type="text">

 

控件初始化代碼：

$("#fileinput").fileinput({ language : 'zh', browseClass : 'btn btn-primary btn-sm', uploadUrl : '${pageContext.request.contextPath}/fileUpload/upload.do' });

由於須要文件上傳的附加信息是動態的，因此有控件內容更新的代碼：

$("#fileinput").fileinput('clear'); //上傳附加信息
var bizData = {id: row.id, bizType: 'SUBS'}; $("#fileinput").fileinput('refresh', { uploadExtraData : { extraData : JSON.stringify(bizData) } }); $("#fileinput").on('fileuploaded', function(e, data){ var result = data.response; //上傳成功處理邏輯
});

後臺處理邏輯：

//文件上傳路徑
@Value(value="#{configProperties['path.upload']}") private String fileUploadPath; public Msg upload(@RequestParam("fileinput[]") MultipartFile fileinput, String extraData) { Msg msg = new Msg(); if (StringUtils.isBlank(extraData)) { msg.set(ResultInfoEnums.PARAMETER_NULL.getCode(), ResultInfoEnums.PARAMETER_NULL.getDesc()); return msg; } JSONObject bizData = JSON.parseObject(extraData); String bizType = bizData.getString("bizType"); String bizId = bizData.getString("id"); if (StringUtils.isBlank(bizType) || StringUtils.isBlank(bizId)) { msg.set(ResultInfoEnums.PARAMETER_NULL.getCode(), ResultInfoEnums.PARAMETER_NULL.getDesc()); return msg; } String localFileName = ""; try { localFileName = saveFileToLocal(fileinput); } catch (Exception e) { e.printStackTrace(); msg.set("0003", e.getMessage()); return msg; } //文件上傳信息入庫
    JSONObject result = fileUploadService.upload(fileinput.getOriginalFilename(), localFileName, bizType, bizId, getUserId()); logger.info("上傳文件保存結果, result = " + result); if (result.getInteger("count") > 0) { msg.set("0000", "上傳成功"); msg.setData(result); }else { msg.set("0001", "上傳失敗"); } return msg; } //保存文件到本地磁盤
private String saveFileToLocal(MultipartFile fileinput) throws Exception { String random = UUID.randomUUID().toString().replace("-", ""); SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd"); String today = sdf.format(new Date()); String localFileName = fileUploadPath + today + "-" + random + "-" + fileinput.getOriginalFilename(); File dest = new File(localFileName); if (dest.exists()) { logger.error(localFileName + "已存在"); throw new Exception("文件名衝突"); } try { fileinput.transferTo(dest); } catch (IllegalStateException | IOException e) { logger.error("文件保存爲" + localFileName + "異常"); e.printStackTrace(); throw new Exception("文件保存異常"); } return localFileName; }