java+springboot+bootstrap-fileInput 文件上传前后台完整示例
先看效果图
====================================================
引入的js css
<script src="/bootstrap/js/fileinput.min.js"></script>
<link rel="stylesheet" href="/bootstrap/css/fileinput.min.css"/>
================================================
html :
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <link href="http://cdn.jsdelivr.net/webjars/bootstrap/3.3.6/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/3.3.6/css/bootstrap.min.css}" rel="stylesheet" media="screen" /> <meta charset="utf-8"/> </head> <body> <div th:fragment="apk-form"> <form method="post" class="box-header with-border" action="" th:object="${apkVersion}" id="dataFrom" enctype="multipart/form-data" > <input type="hidden" name ="id" id="id" /> <input type="hidden" name ="url" id="url" /> <input type="hidden" name ="fileMd5" id="fileMd5" /> <input type="hidden" name ="version" id="version" /> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header" style="background: #3c8dbc;"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">新增</h4> </div> <div class="modal-body"> <div class="form-group"> <label class="form-label col-3">版本说明：</label> <div class="formControls col-5" > <textarea name="comment" id="comment" cols="" rows="" class="textarea" style="width: 400px" placeholder="说点什么...100个字符以内" dragonfly="true" ></textarea> <p class="textarea-numberbar"><em class="textarea-length">0</em>/100</p> </div> <div class="col-4"> </div> </div> <div class="form-group"> <label class="control-label">上传版本：</label> <input type="file" name="uploadfile" id="uploadfile" multiple="multiple" class="file-loading" /> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button> <input class="btn btn-primary radius" type="button" onclick="save()" value=" 提交 "/> </div> </div> </div> </div> </form> </div> </body> </html>
===============================
<!-- page script --> <script>function btn_add(){ $("#myModalLabel").text("添加版本"); $('#myModal').modal(); } $("#uploadfile").fileinput({ language: 'zh', //设置语言 uploadUrl: "/apk_upload", //上传的地址 allowedFileExtensions: ['apk'],//接收的文件后缀 uploadAsync: true, //默认异步上传 showUpload: true, //是否显示上传按钮 showRemove : true, //显示移除按钮 showPreview : true, //是否显示预览 showCaption: false,//是否显示标题 browseClass: "btn btn-primary", //按钮样式 dropZoneEnabled: false,//是否显示拖拽区域 maxFileCount: 1, //表示允许同时上传的最大文件个数 enctype: 'multipart/form-data', validateInitialCount:true }); //异步上传返回结果处理 $("#uploadfile").on("fileuploaded", function (event, data, previewId, index) { var response = data.response; alert(response.filePath); $("#fileMd5").val(response.fileMd5); $("#version").val(response.newVersionName); $("#url").val(response.filePath); }); //上传前 $('#uploadfile').on('filepreupload', function(event, data, previewId, index) { var form = data.form, files = data.files, extra = data.extra, response = data.response, reader = data.reader; }); </script>
========================js html 网上例子很多很多 ， 但是网上找后台接收参数的例子很少，一下是Java 后端代码：
@ResponseBody @RequestMapping(value = "/apk_upload" ,method = RequestMethod.POST) public Map<String, Object> uploadApkFile(HttpServletRequest request,HttpServletResponse response) throws Exception { request.setCharacterEncoding("UTF-8"); Map<String, Object> json = new HashMap<String, Object>(); MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request; /** 页面控件的文件流* */ MultipartFile multipartFile = null; Map map =multipartRequest.getFileMap(); for (Iterator i = map.keySet().iterator(); i.hasNext();) { Object obj = i.next(); multipartFile=(MultipartFile) map.get(obj); } /** 获取文件的后缀* */ String filename = multipartFile.getOriginalFilename(); InputStream inputStream; String path = ""; String newVersionName = ""; String fileMd5 = ""; try { inputStream = multipartFile.getInputStream(); File tmpFile = File.createTempFile(filename, filename.substring(filename.lastIndexOf("."))); fileMd5 = Files.hash(tmpFile, Hashing.md5()).toString(); FileUtils.copyInputStreamToFile(inputStream, tmpFile); // 上传UpYun后返回的path String versionGbk = AnalysisApk.unZip(tmpFile.getPath(), "")[0]; byte[] versionNam = versionGbk.getBytes("iso8859-1");// 这里写转换前的编码方式 newVersionName = new String(versionNam, "utf-8");// 这里写转换后的编码方式 path = UpyunUtils.uploadApk(tmpFile, multipartFile.getOriginalFilename(), true, newVersionName); System.err.println(path); tmpFile.delete(); } catch (Exception e) { e.printStackTrace(); } json.put("newVersionName", newVersionName); json.put("fileMd5", fileMd5); json.put("message", "应用上传成功"); json.put("status", true); json.put("filePath", path); return json; }
======================
我的难点在 怎么接收后台file
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
其实都存在request 里面。
在方法里面不仅要声明request 还有声明response ， 上传之后的文件路径 回调使用：
//异步上传返回结果处理
$("#uploadfile").on("fileuploaded", function (event, data, previewId, index) {
var response = data.response;
$("#fileMd5").val(response.fileMd5);
$("#version").val(response.newVersionName);
$("#url").val(response.filePath);
});
