bootstrap-fileinput is a HTML5 file upload plugin based on Bootstrap. This file upload plug-in has a preview image effect, and multiple files can be selected at the same time.
This plug-in uses bootstrap CSS3 style to create a file upload interface, which is beautiful and generous. And it is available in multiple languages, you can choose to use Chinese.
This file upload plug-in is more powerful than the ordinary file upload plug-in. It can generate preview images for pictures, text files, HTML files, video files, audio files, and flash files. In addition, it can upload files based on AJAX, drag and drop files to view upload progress, and can selectively preview, add or delete files.
example:
<link rel="stylesheet" href="css/bootstrapCSS/">
<link rel="stylesheet" href="css/bootstrapCSS/" />
<div>
<input type="file" name="uploadfile" multiple class="file-loading" />
</div>
<script type="text/JavaScript" src="js/"></script>
<script type="text/javascript" src="js/bootstrap/"></script>
<script type="text/javascript" src="js/bootstrap/fileinput_locale_zh.js"></script>//Chinese<script type="text/javascript" src="js/bootstrap/"></script>
$("#uploadfile").fileinput({
language: 'zh', //Set the language uploadUrl: "./", //Uploaded address (access interface address) allowedFileExtensions: ['jpg', 'gif', 'png'],//Received file suffix //uploadExtraData:{"id": 1, "fileName":'123.mp3'},
uploadAsync: true, //Default asynchronous upload showUpload: true, //Whether to display the upload button showRemove : true, //Show the Remove button showPreview : true, //Whether to display the preview showCaption: false,// Whether to display the title browseClass: "btn btn-primary", //Button style dropZoneEnabled: false,//Whether to display the drag area //minImageWidth: 50, //Minimum width of the picture //minImageHeight: 50,//The minimum height of the picture //maxImageWidth: 1000,//max width of the picture //maxImageHeight: 1000,//Maximum height of the picture //maxFileSize: 0,//The unit is kb. If it is 0, it means that the file size is not limited maxFileCount: 10, //Indicates the maximum number of files allowed to be uploaded simultaneously enctype: 'multipart/form-data',
validateInitialCount:true,
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
msgFilesTooMany: "Select the number of uploaded files({n}) Exceed the maximum allowed value{m}！",
});
//Asynchronous upload returns error results processing$('#uploadfile').on('fileerror', function(event, data, msg) {
();
();
();
();
();
// get message
alert(msg);
});
//Asynchronous upload and return result processing$("#uploadfile").on("fileuploaded", function (event, data, previewId, index) {
();
();
();
();
();
var obj = ;
alert(());
});
//Batch synchronous upload error handling$('#uploadfile').on('filebatchuploaderror', function(event, data, msg) {
();
();
();
();
();
// get message
alert(msg);
});
//Successful results processing of batch synchronization upload$("#uploadfile").on("filebatchuploadsuccess", function (event, data, previewId, index) {
();
();
();
();
();
var obj = ;
alert(());
});
//Before upload$('#uploadfile').on('filepreupload', function(event, data, previewId, index) {
var form = , files = , extra = ,
response = , reader = ;
('File pre upload triggered');
});
</script>
The above are some parameters of BootStrap Fileinput initialization that the editor introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!