Detailed explanation of examples of Bootstrap fileinput file upload component

This article mainly introduces the use of the Bootstrap fileinput file upload component in detail. It has a certain reference value. Interested friends can refer to it [Related video recommendation: Bootstrap Tutorial】

1. Usage method

1. Import dependent js and css files:

<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/fileinput.min.css" />
<script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
<script type="text/javascript" src="js/fileinput.js" ></script>
<script type="text/javascript" src="js/zh.js" ></script>
<script type="text/javascript" src="js/my.js" ></script>

2. Create a file input area

<form>
 <p class="form-group">
  <h3>Bootstrap File Input Demo1</h3>
 </p>

 <input name="uploadFile" type="file" id="uploadFile" multiple class="file-loading" />
</form>

3. Write the my.js file and initialize the file upload component

$(function() {
 //初始化fileinput
 var fileInput = new FileInput();
 fileInput.Init("uploadFile", "http://127.0.0.1/testDemo/fileupload/upload.action");
});

//初始化fileinput
var FileInput = function() {
 var oFile = new Object();

 //初始化fileinput控件（第一次初始化）
 oFile.Init = function(ctrlName, uploadUrl) {
  var control = $('#' + ctrlName);

  //初始化上传控件的样式
  control.fileinput({
   language: 'zh', //设置语言
   uploadUrl: 'http://127.0.0.1/testDemo/fileupload/upload.action', //上传的地址
   allowedFileExtensions: ['jpg', 'png', 'gif'], //接收的文件后缀
   uploadAsync: true, //默认异步上传

   showUpload: false, //是否显示上传按钮
   showRemove: true, //显示移除按钮
   showCaption: true, //是否显示标题

   dropZoneEnabled: true, //是否显示拖拽区域

   //minImageWidth: 50, //图片的最小宽度
   //minImageHeight: 50,//图片的最小高度
   //maxImageWidth: 1000,//图片的最大宽度
   //maxImageHeight: 1000,//图片的最大高度
   //maxFileSize:0,//单位为kb，如果为0表示不限制文件大小
   //minFileCount: 0,
   maxFileCount: 10, //表示允许同时上传的最大文件个数
   enctype: 'multipart/form-data',

   browseClass: "btn btn-primary", //按钮样式: btn-default、btn-primary、btn-danger、btn-info、btn-warning  
   previewFileIcon: "<i class=&#39;glyphicon glyphicon-king&#39;></i>",

  });

  //文件上传完成之后发生的事件
  $("#uploadFile").on("fileuploaded", function(event, data, previewId, index) {

  });
 }
 return oFile; //这里必须返回oFile对象，否则FileInput组件初始化不成功
};

2. Rendering

1. Initialization interface:

2. Multiple files can be realized Upload:

3. Click a file to preview in full screen:

3. Options Introduction

IV. Introduction to Method

I will write it down when I have time

5. Source code download

Bootstrap fileinput file upload component

The above is the detailed content of Detailed explanation of examples of Bootstrap fileinput file upload component. For more information, please follow other related articles on the PHP Chinese website!