1. bootstrap怎樣實現文件上傳的
1、文件上傳插件FileInput介紹這個插件主頁地址是：plugins.krajee.com/file-input，可以從這里看到很多Demo的代碼展示：plugins.krajee.com/file-basic-usage-demo。這是一個增強的HTML5文件輸入控制項，是一個Bootstrap3.x的擴展，實現文件上傳預覽，多文件上傳等功能。一般情況下，我們需要引入下面兩個文件，插件才能正常使用：bootstrap-fileinput/css/fileinput.min.cssbootstrap-fileinput/js/fileinput.min.js簡單的界面效果如下所示，和眾多上傳文件控制項一樣，可以接受各種類型的文件。當然，我們也可以指定具體接受的文件類型等功能。如果需要考慮中文化，那麼還需要引入文件：bootstrap-fileinput/js/fileinput_locale_zh.js這樣基於MVC的Bundles集合，我們把它們所需要的文件加入到集合裡面即可。//添加對bootstrap-fileinput控制項的支持css_metronic.Include("~/Content/MyPlugins/bootstrap-fileinput/css/fileinput.min.css");js_metronic.Include("~/Content/MyPlugins/bootstrap-fileinput/js/fileinput.min.js");js_metronic.Include("~/Content/MyPlugins/bootstrap-fileinput/js/fileinput_locale_zh.js");這樣我們在頁面裡面，就可以呈現出中文的界面說明和提示了，如下界面所示。2、文件上傳插件FileInput的使用一般情況下，我們可以定義一個JS的通用函數，用來初始化這個插件控制項的，如下JS的函數代碼所示。//初始化fileinput控制項（第一次初始化）functioninitFileInput(ctrlName,uploadUrl){varcontrol=$('#'+ctrlName);control.fileinput({language:'zh',//設置語言uploadUrl:uploadUrl,//上傳的地址allowedFileExtensions:['jpg','png','gif'],//接收的文件後綴showUpload:false,//是否顯示上傳按鈕showCaption:false,//是否顯示標題browseClass:"btnbtn-primary",//按鈕樣式previewFileIcon:"",});}頁面代碼裡面，我們放置一個文件上傳控制項，如下代碼所示。這樣我們腳本代碼的初始化代碼如下：//初始化fileinput控制項（第一次初始化）initFileInput("file-Portrait","/User/EditPortrait");這樣就完成了控制項的初始化了，如果我們需要上傳文件，那麼還需要JS的代碼處理客戶端上傳的事件，同時也需要MVC後台控制器處理文件的保存操作。例如我對窗體數據的保存處理代碼如下所示。//添加記錄的窗體處理formValidate("ffAdd",function(form){$("#add").modal("hide");//構造參數發送給後台varpostData=$("#ffAdd").serializeArray();$.post(url,postData,function(json){vardata=$.parseJSON(json);if(data.Success){//增加肖像的上傳處理initPortrait(data.Data1);//使用寫入的ID進行更新$('#file-Portrait').fileinput('upload');//保存成功1.關閉彈出層，2.刷新表格數據showTips("保存成功");Refresh();}else{showError("保存失敗:"+data.ErrorMessage,3000);}}).error(function(){showTips("您未被授權使用該功能，請聯系管理員進行處理。");});});