導航:首頁 > 文件管理 > 上傳文件一般用什麼控制項

上傳文件一般用什麼控制項

發布時間:2024-10-04 01:35:51

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

閱讀全文

與上傳文件一般用什麼控制項相關的資料

熱點內容
升win10卡在34 瀏覽:962
sfc文件 瀏覽:262
公牛蘋果數據線2a什麼意思 瀏覽:489
勒索蠕蟲檢測工具 瀏覽:68
蘋果手錶固件描述文件下載 瀏覽:330
android獲取sd卡視頻文件 瀏覽:949
蘋果手機設置通用網路設置 瀏覽:83
md298zpa是什麼版本 瀏覽:317
srslog文件在哪個目錄 瀏覽:948
無法找到文件中可刪除的圖片 瀏覽:739
dnf90版本副職業 瀏覽:848
c只讀打開文件 瀏覽:575
如何在電腦文件上添加圖片 瀏覽:297
xslist網站怎麼登錄 瀏覽:735
ftp不能直接打開文件 瀏覽:145
ps調整後的xps文件 瀏覽:572
小米如何取消wifi和數據同時使用 瀏覽:347
微信數據6個g怎麼清理 瀏覽:533
找廠房去哪個app 瀏覽:881
linuxmini 瀏覽:997

友情鏈接