Bootstrap 文件上传组件 --- Bootstrap fileinput 使用方法记录上传文件 java Bootstrap fileinput 上传文件-蒲公英云

Bootstrap 文件上传组件 --- Bootstrap fileinput 使用方法记录上传文件 java Bootstrap fileinput 上传文件

Bootstrap 文件上传组件 —- Bootstrap fileinput 使用方法记录上传文件

一、下载地址

1、下载： https://github.com/kartik-v/bootstrap-fileinput

2、demo： https://github.com/kartik-v/bootstrap-fileinput-samples

3、示例： http://plugins.krajee.com/file-input/demo

二、代码示例

1、引入 css 和 js 文件 。（${ctxStatic } 开头的是 bootstrap-fileinput 插件的文件）

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" crossorigin="anonymous">
<link href="${ctxStatic }/css/fileinput/css/fileinput.css"  rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" crossorigin="anonymous">
<script src="${ctxStatic }/js/jquery-3.2.1.js" type="text/javascript" crossorigin="anonymous"></script>
<script src="${ctxStatic }/js/fileinput/js/fileinput.js" type="text/javascript"></script>
<script src="${ctxStatic }/js/fileinput/js/locales/zh.js" type="text/javascript"></script>

2、html 代码

<h2>BootStrap FileInput 文件上传</h2>
    <form enctype="multipart/form-data">
        <label>Chinese Input</label>
        <div class="file-loading">
            <input id="uploadFile" name="uploadFile" type="file" multiple >
        </div>
    </form>
    <hr>
    <h3>上传成功的图片显示在下面</h3>
    <div id="img_show"></div>

3、插件相关配置

<script type="text/javascript">
     $(function(){
          $('#uploadFile').fileinput({
              theme : 'explorer-fas',
                   language: 'zh',
                    uploadAsync: true, //默认异步上传
               showUpload: true,  //是否显示上传按钮
                showRemove :true, //显示移除按钮
                    showPreview: true, // 显示预览信息： true 显示 , false 不显示
                   showCancel:true,   //是否显示文件上传取消按钮。默认为true。只有在AJAX上传过程中，才会启用和显示
                   showCaption: true, // 显示标题：true 显示 , false 不显示
                   uploadUrl: '${ctx}/fileInputUploadServlet', // 上传文件的url
                      allowedFileExtensions: ['jpg', 'png', 'gif'], // 允许文件扩展名
                   browseClass: "btn btn-primary ", 
                   uploadExtraData: {kvId: '10'}, // 额外传输的参数
                   dropZoneEnabled: false,//是否显示拖拽区域
                   dropZoneTitle: '文件拖到这里即可上传！', // 拖拽区域提示内容 
             });
          // fileuploaded 此事件仅针对ajax上传完成后触发， 可用于图片文件回显
         $('#uploadFile').on('fileuploaded', function(event, data, previewId, index) {
              var imgArray = data.response.result ;
              for(var x = 0 ; x < imgArray.length ; x++ ){
                  $("#img").attr("src","${ctx}"+imgArray[x]);
                   var _ele="<img src='${ctx}"+imgArray[x]+"' height='300' width='200' />";
                   $("#img_show").append(_ele);
              }
         });
        });
    </script>