bootstrap fileinput implements file upload function

The upload file control of bootstrap is said to be the best, but it is quite awkward to use it.

First of all, this control is very simple.

html code

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

You may need to save buttons, etc. This can be added in addition, just specify the event method. Of course, you need to introduce the relevant css and js of bootstrap in html.

and

In your own js, that is, the event method of saving buttons, etc., you need to write a piece of key code.

$('#txt_file').fileinput('upload');

This is the uploaded code.

In addition to the above, an important piece of code is also needed. This initialization and upload control is used to set some necessary parameters.

function initFileInput(ctrlName, uploadUrl) {
  var control = $('#' + ctrlName);
  ({
   language: 'zh', //Set the language   uploadUrl: uploadUrl, //Uploaded address   allowedFileExtensions : ['txt', 'doc','docx'],//Received file suffix   showUpload: false, //Whether to display the upload button   showCaption: false,// Whether to display the title   enctype: 'multipart/form-data',
   browseClass: "btn btn-primary", //Button style   previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
   uploadExtraData: function() { // Key points of extra parameters     return data;
    }
   }).on("fileuploaded", function (event, data, previewId, index) {
    ();
   });
 }
 
 //------Entry method----- $(function() {
  initFileInput("txt_file", "/");
 });

After setting these, bootstrap can automatically upload files. The specific upload rules are controlled by the project controller.

Regarding the callback function, it is on("dileuploaded",func......). This is called once after the attachment is uploaded successfully. There is also a callback function when the attachment is just selected. The keyword isfilebatchselected。

The key is to talk about the upload mechanism of bootstrap. It supports multiple file uploads and uploads files through multiple threads. One attachment is passed once. Therefore, the callback function after successful uploading will be called multiple times.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.