文件上传

概述

文件上传提供的是本地文件上传和云存储上传功能,同时返回上传后的路径

本地文件上传功能

本地文件上传功能是系统默认上传功能。

引入脚本

<!-- 文件上传输入框 -->
<div class="file-loading">
  <input id="inputFiles" type="file" name="file" multiple>
</div>

<!-- 文件上传_start , 后期做优化调整 -->
<link th:href="@{/asserts/ajax/libs/bootstrap-fileinput/fileinput.min.css}" rel="stylesheet">
<link th:href="@{/asserts/ajax/libs/bootstrap-fileinput/themes/explorer/theme.min.css}" rel="stylesheet">

<script th:src="@{/asserts/ajax/libs/bootstrap-fileinput/fileinput.min.js}"></script>
<script th:src="@{/asserts/ajax/libs/bootstrap-fileinput/themes/explorer/theme.min.js}"></script>
<!-- 文件上传_end -->

初始化输入框

<script type="text/javascript">
    $(function(){
      $.upload.initBootstrapInput("inputFiles" , ctx + "web/storage/bootstrapInputMultiUpload" , function(data , index){
        var path = data[0].filepath ;
        alert("path = " + path) ;
      }) ;
    }) ;
</script>

效果如下

云存储上传功能

云存储上传有一定的大小限制和场景限制，满足一般的存储功能，系统默认为七牛云存储，适用于多个分布式组件的存储调用。

引入云存储接口路径

alinesno:
  storage:
    cloud.path: http://localhost:25003/storageFile/upload

云存储上传路径做调整，即

<script type="text/javascript">
  $(function(){
    $.upload.initBootstrapInput("inputFiles" , ctx + "web/storage/bootstrapInputCloudUpload" , function(data , index){
      var path = data[0].filepath ;
      alert("path = " + path) ;
    }) ;
  }) ;
</script>

其它

• 略