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、插件相关配置

扫描二维码关注公众号，回复： 9494928 查看本文章

 <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>

三、服务端接口

１、配置好 uploadUrl 服务端接口即可实现文件上传，这里不提供具体实现。毕竟服务端太多，　java，python，c，php 等等。

2、java 使用Servlet文件上传：原生Servlet文件上传和下载Servlet多个文件上传

3、java 使用SpringMVC文件上传： springMVC使用ajax实现文件上传

四、测试

1、插件初始化后，效果如下：