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("您未被授權使用該功能,請聯系管理員進行處理。");});});