java+springboot+bootstrap-fileInput 文件上传前后台完整示例

先看效果图

====================================================

引入的js 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="&nbsp;&nbsp;提交&nbsp;&nbsp;"/>
        </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);
       
    });

秒客网

java+springboot+bootstrap-fileInput 文件上传前后台完整示例

相关文章