Bootstrap file input for multi-image upload function

Official Document http://plugins.krajee.com/

Demo HTTP://PLUGINS.KRAJEE.COM/FILE-INPUT-AJAX-DEMO/3

GitHub Resources Https://github.com/kartik-v/bootstrap-fileinput

Html

<input id= "input-700" name= "kartik-input-700[" "type=" file "multiple class=" file-loading "> <!--required--
<div id= "kv-error-1" style= "Margin-top:10px;display:none" ></div>
<div id= "kv-success-1" class= "Alert alert-success fade In" style= "Margin-top:10px;display:none" ></div>

Js

<link rel= "stylesheet" href= ". /libs/bootstrap-fileinput-4.4.3/css/fileinput.min.css ">

<script src= ". /libs/bootstrap-fileinput-4.4.3/js/fileinput.min.js "></script>
<script src= ". /libs/bootstrap-fileinput-4.4.3/js/locales/zh.js "></script>

<script>

$ ("#input -700"). Fileinput ({
Uploadurl:rootpath+ ',//server upload action
Language: ' en ',
minfilecount:0,
Uploadasync:true,
Maxfilecount:10,
Enctype: ' Multipart/form-data ',
maxfilesize:5120,//Limit Upload size kb
overwriteinitial:false,//do not overwrite uploaded images
allowedpreviewtypes:[' image ', ' html ', ' text ', ' video ', ' Audio ', ' Flash ', ' object ',
Allowedfileextensions: [' jpg ', ' png ', ' gif '],//can be selected in the format of the violation
Elerrorcontainer: ' #kv-error-1 ',//error-displayed text Continner
Showbrowse:true,
Browseonzoneclick:true,
ajaxsettings:{
Contenttype:false
}
}). On ("Filepredelete", function (JQXHR) {
var abort = true;
if (Confirm ("is sure you want to delete this image?")) {
Abort = false;
}
return abort; You can also send any data/object so can receive on ' Filecustomerror ' event
}). On (' Filebatchpreupload ', function (event, data) {
var n = data.files.length, files = n > 1? n + ' files ': ' one file ';
if (!window.confirm ("OK to upload selected files?")) {
return {
Message: "Upload failed!",//Upload error message
data:{}//Any other data to send the can is referred in ' Filecustomerror '
};
}
}). On (' fileuploaded ', function (event, data, ID, index) {//processing after successful upload
Console.log (data)
Inputfiles.push (Data.response.data.id[0]);
var fname = Data.files[index].name,
out = ' <li> ' + ' File # ' + (index + 1) + '-' +
fname + ' upload success! ' + ' </li> ';
$ (' #kv-success-1 ul '). Append (out);
$ (' #kv-success-1 '). FadeIn (' slow ');
}). On (' Filebatchpreupload ', function (event, data, ID, index) {
$ (' #kv-success-1 '). html (' })

</script>

Assignment HTML JS introduced CSS, JS is visible effect

Bootstrap file input for multi-image upload function