Bootstrap fileinput File Upload Component Usage Details, bootstrapfile component

Bootstrap fileinput File Upload Component Usage Details, bootstrapfile component

I. Usage

1. Import the 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> <div class="form-group">  
3. Compile the my. js file and initialize the File Upload Component.

$ (Function () {// initialize fileinput var fileInput = new FileInput (); fileInput. init ("uploadFile", "http: // 127.0.0.1/testDemo/fileupload/upload. action ") ;}); // initialize fileinputvar FileInput = function () {var oFile = new Object (); // initialize the fileinput control (first initialization) oFile. init = function (ctrlName, uploadUrl) {var control = $ ('#' + ctrlName); // initialize the style control of the upload control. fileinput ({language: 'zh ', // setting language uploadUrl: 'http: // 127.0.0.1/testDemo/fileupload/upload. action ', // The uploaded URL allowedFileExtensions: ['jpg', 'png ', 'gif'], // The received file suffix uploadAsync: true, // showUpload: false by default, // whether to display the upload button showRemove: true, // display the Remove button showCaption: true, // whether to display the title dropZoneEnabled: true, // whether to display the drag and drop area // minImageWidth: 50, // The minimum width of the image // minImageHeight: 50, // The minimum height of the image // maxImageWidth: 1000, // Maximum image width // maxImageHeight: 1000, // maximum Image Height // maxFileSize: 0, // unit: kb, if the value is 0, the file size is not limited. // minFileCount: 0, maxFileCount: 10, // indicates the maximum number of files that can be uploaded simultaneously. enctype: 'multipart/form-data', browseClass: "btn-primary", // button style: btn-default, btn-primary, btn-danger, btn-info, btn-warning previewFileIcon: "<I class = 'glyphicon glyphicon-king'> </I>",}); // events that occur after the file is uploaded $ ("# uploadFile "). on ("fileuploaded", function (event, data, previewId, index) {});} return oFile; // The oFile object must be returned here; otherwise, FileInput component initialization fails };
II,
1. Initialization interface:

2. Multifile upload is supported:

3. Click a file to preview the file in full screen:

Iii. Introduction to Options

Iv. Method Introduction

Write again when you are free
V. Download source code

Bootstrap fileinput File Upload Component
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.