Official website:https://github.com/kartik-v/bootstrap-fileinput/Http://plugins.krajee.com/file-inputHTML page:Reference:
< link href = "~/bootstrapcomponent/css/fileinput.css" rel = "stylesheet" /> < script src = "~/bootstrapcomponent/js/fileinput.js" ></ script > < script src = "~/bootstrapcomponent/js/locales/zh.js" ></ script >
<!--Container -<inputID= "Inputfile"type= "File"class= "File"Data-preview-file-type= "text"name= "File"><!--JS Code -<Script> //initializing the Fileinput control $("#inputFile"). Fileinput ({language:'ZH', Autoreplace:false, Maxfilecount:1, allowedfileextensions: ["jpg", "PNG", "gif"], Browseclass:"btn Btn-primary", //button StylePreviewfileicon:"<i class= ' Glyphicon glyphicon-king ' ></i>" });</Script>
fileinput.js File parameter modification:$.fn.fileinput.defaults = {language: ' en ', showcaption:true,showbrowse:true,showpreview:true,showremove:true, Showupload:false,//if the upload button for the component is not displayed for synchronous submissionShowcancel:true,showclose:true, ...}MVC Controller:
/// <summary> ///MVC File Upload background method/// </summary> /// <returns></returns> PublicJsonresult FileUpload () {stringText ="Location Error! "; BOOLIssuccess =false; varFiles =Request.Files; if(Files! =NULL&& files. Count >0) { Try { varFile = files[0]; varFileName =file. FileName; varFilePath = Path.Combine (Httpruntime.appdomainapppath,"Image", fileName);//Absolute Pathfile. SaveAs (FilePath); Issuccess=true; Text="Upload Success! "; } Catch(Exception e) {text=E.message; } } returnJson (New{Success = issuccess, Message =text}, Jsonrequestbehavior.allowget); }
Simple demo of Bootstrap-fileinput components