Bootstrap-based Fileinput plugin for uploading

Demo of user Avatar Upload

1. Introduction of File CSS files

<link rel= "stylesheet" href= ". /.. /libs/bootstrap-3.3.7/css/bootstrap.min.css "><!--introduced bootstrap css file--><link rel=" stylesheet "href=". /.. /libs/bootstrap-fileinput-master/css/fileinput.min.css "><!--introduction of fileinput plugin CSS file--><link rel=" Stylesheet "href=". /css/index.css "><!--your own CSS file--

2. Introduction of JS File

<script src= ". /.. /libs/jq/jquery-1.11.3.js "></script><!--introducing JQ file--><script src=". /.. /libs/bootstrap-3.3.7/js/bootstrap.min.js "></script><!--introduction of Bootstrap js file--><script src=". /.. /libs/bootstrap-fileinput-master/js/fileinput.min.js "></script><!--introduced fileinput plugin js file-->< Script Src= ". /.. /libs/bootstrap-fileinput-master/js/locales/zh.js "></script><!--introducing Chinese files--

3. Page layout

<form class= "Form form-vertical" id= "Userimguploadform" action= "#" method= "POST" enctype= "Multipart/form-data"            > <div class= "Row" style= "margin:0" > <div class= "col-lg-3 col-md-3 col-xs-12 col-sm-4" > <div class= "Kv-avatar center-block text-center" style= "width:200px;" > <input id= "avatar-1" name= "image" type= "file" class= "file-loading" Required> <        Div class= "Help-block" ><small> select Avatar file </small></div> </div> </div> <div class= "Col-sm-8" > <div class= "Row" > 
4.js Code
var btncust = ' <button type= ' button ' class= ' btn btn-default ' title= ' Add picture tags ' + ' onclick= ' alert (\ ' Call Your custom code here.\ ') "> ' + ' <i class=" Glyphicon glyphicon-tag "></i> ' + ' </button> '; $ ("#avatar-1"). Fileinput ({language: ' zh ',//Set the language of the plugin Overwriteinitial:true, maxfilesize:1500,//maximum file limit Showclose:false, Showcaption:false, Browselabel: ", Removelabel: ", Browseicon: ' <i class= ' Glyphicon glyphicon-folder-open ' ></i> ', RemoveIcon: ' <i class= ' Glyphicon glyphicon-remove ' ></i> ', Removetitle: ' Cancel or reset changes ', Elerrorcontainer: ' #kv-avatar-errors-1 ', Msgerrorclass: ' Alert Alert-block alert-danger ', defaultpreviewcontent: '  ' , layouttemplates: {main2: ' {preview} ' + Btncust + ' {remove} {browse} ' }, allowedfileextensions: ["JPG", "png", "gif"]//upload file type settings });　　　　$ ('. Uploaduserimg '). Click (function  () {//Click the Upload button, new one FormData object var formData1 = new  FormData (); The object joins the incoming file, the key is the name of input, and is easy to get formdata1.append (' image ', $ (' #avatar-1 ') [0].files[0 ]) in the background; $.ajax ({url: ' http:/ /192.168.0.133:8888/upload ',//server upload address type: ' POST ' , cache:false,//upload picture does not need to cache  Data:formdata1, processdata:false,//does not need to process the data contenttype:false , success:function  (Result) {Console.log (Result)// Data returned in the background//do somethings }}). Done (function  (res) {Console.log (res)}). Fail (function  (res) {cons Ole.log (res) console.log (' Err ' )}); })
Seems... It's gone.
Bootstrap-based Fileinput plugin for uploading