JS元件系列——Bootstrap檔案上傳元件:bootstrap fileinput
前言:之前的三篇介紹了下bootstrap table的一些常見用法,發現博主對這種扁平化的風格有點著迷了。前兩天做一個excel匯入的功能,前端使用原始的input type='file'這種標籤,效果不忍直視,於是博主下定決心要找一個好看的上傳元件換掉它。既然bootstrap開源,那麼社群肯定有很多關於它的元件,肯定也有這種常見的上傳元件吧。經過一番查詢,功夫不負有心人,還是被博主找到了這個元件:bootstrap fileinput。關於這個元件的簡單應用,部落格園大牛伍華聰寫過一篇基於Metronic的Bootstrap開發框架經驗總結(5)--Bootstrap檔案上傳外掛File Input的使用
原始碼以及API地址:
一、效果展示
1、原始的input type='file',簡直不忍直視。
2、不做任何裝飾的bootstrap fileinput:(bootstrap fileinput初級進化)
3、bootstrap fileinput高階進化:中文化、可拖拽上傳、副檔名校驗(如果不是需要的檔案,不讓上傳)
拖拽上傳
上傳中
4、bootstrap fileinput究極進化:允許同時多執行緒上傳多個檔案。
上傳中
上傳完成後
二、程式碼示例
怎麼樣?效果如何?不要急,我們一步一步來實現以上的效果。
1、cshtml頁面
首先引入需要的js和css檔案。
//bootstrap fileinput bundles.Add(new ScriptBundle("~/Content/bootstrap-fileinput/js").Include( "~/Content/bootstrap-fileinput/js/fileinput.min.js","~/Content/bootstrap-fileinput/js/fileinput_locale_zh.js")); bundles.Add(new StyleBundle("~/Content/bootstrap-fileinput/css").Include( "~/Content/bootstrap-fileinput/css/fileinput.min.css"));
@Scripts.Render("~/Content/bootstrap-fileinput/js")
@Styles.Render("~/Content/bootstrap-fileinput/css")
然後定義input type='file'標籤
<form> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">請選擇Excel檔案</h4> </div> <div class="modal-body"> <a href="~/Data/ExcelTemplate/Order.xlsx" class="form-control" style="border:none;">下載匯入模板</a> <input type="file" name="txt_file" id="txt_file" multiple class="file-loading" /> </div></div> </div> </div> </form>
重點看這一句:
<input type="file" name="txt_file" id="txt_file" multiple class="file-loading" />
multiple表示允許同時上傳多個檔案,class=“file-loading”表示標籤的樣式。這裡很重要,如果class="file",則中文化不能生效。
2、js初始化
$(function () { //0.初始化fileinput var oFileInput = new FileInput(); oFileInput.Init("txt_file", "/api/OrderApi/ImportOrder"); });
//初始化fileinput var FileInput = function () { var oFile = new Object(); //初始化fileinput控制元件(第一次初始化) oFile.Init = function(ctrlName, uploadUrl) { var control = $('#' + ctrlName); //初始化上傳控制元件的樣式 control.fileinput({ language: 'zh', //設定語言 uploadUrl: uploadUrl, //上傳的地址 allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的檔案字尾 showUpload: true, //是否顯示上傳按鈕 showCaption: false,//是否顯示標題 browseClass: "btn btn-primary", //按鈕樣式 //dropZoneEnabled: false,//是否顯示拖拽區域 //minImageWidth: 50, //圖片的最小寬度 //minImageHeight: 50,//圖片的最小高度 //maxImageWidth: 1000,//圖片的最大寬度 //maxImageHeight: 1000,//圖片的最大高度 //maxFileSize: 0,//單位為kb,如果為0表示不限制檔案大小 //minFileCount: 0, maxFileCount: 10, //表示允許同時上傳的最大檔案個數 enctype: 'multipart/form-data', validateInitialCount:true, previewFileIcon: "<i class='glyphicon glyphicon-king'></i>", msgFilesTooMany: "選擇上傳的檔案數量({n}) 超過允許的最大數值{m}!", }); //匯入檔案上傳完成之後的事件 $("#txt_file").on("fileuploaded", function (event, data, previewId, index) { $("#myModal").modal("hide"); var data = data.response.lstOrderImport; if (data == undefined) { toastr.error('檔案格式型別不正確'); return; } //1.初始化表格 var oTable = new TableInit(); oTable.Init(data); $("#div_startimport").show(); }); } return oFile; };
說明:
(1)fileinput()方法裡面傳入的是一個json資料,它裡面有很多屬性,每個屬性代表著初始化上傳控制元件的時候的特性,如果這些屬性都不設定,則表示使用預設的設定。如果園友們想看看它裡面有哪些屬性,可以開啟fileinput.js的原始碼,在它的最後如圖:
這些屬性如果不特意設定,就會使用預設值。
(2)$("#txt_file").on("fileuploaded", function (event, data, previewId, index) {}這個方法註冊上傳完成後的回撥事件。也就是後天處理上傳的檔案之後進入這個方法裡面處理。
3、後臺C#對應的方法
還記得在js裡面初始化控制元件方法fileinput()裡面有一個引數url嗎,這個url對應的值就指示C#後天對應的處理方法。還是貼出後臺的處理方法。
[ActionName("ImportOrder")] public object ImportOrder() { var oFile = HttpContext.Current.Request.Files["txt_file"]; var lstOrderImport = new List<DTO_TO_ORDER_IMPORT>(); #region 0.資料準備 var lstExistOrder = orderManager.Find(); var lstOrderNo = lstExistOrder.Select(x => x.ORDER_NO).ToList(); var lstTmModel = modelManager.Find(); var lstTmMaterial = materialManager.Find(); //var iMax_Import_Index = lstExistOrder.Max(x => x.IMPORT_INDEX); //iMax_Import_Index = iMax_Import_Index == null ? 0 : iMax_Import_Index.Value; #endregion #region 1.通過Stream得到Workbook物件 IWorkbook workbook = null; if (oFile.FileName.EndsWith(".xls")) { workbook = new HSSFWorkbook(oFile.InputStream); } else if(oFile.FileName.EndsWith(".xlsx")) { workbook = new XSSFWorkbook(oFile.InputStream); } if (workbook == null) { return new { }; } //...............處理excel的邏輯
//orderManager.Add(lstOrder); lstOrderImport = lstOrderImport.OrderBy(x => x.IMPORT_STATU).ToList(); return new { lstOrderImport = lstOrderImport }; }
由於博主的專案是上傳excel,所以這裡用是用的NPOI的邏輯,如果是上傳圖片等檔案,可以使用GDI去處理圖片。
4、同時上傳多個檔案
同時上傳多個檔案的時候,前臺會發送多個非同步的請求到後臺,也就是說,當同時上傳三個檔案的時候,後臺的ImportOrder方法會進入三次。這樣就能使用多執行緒同時去處理三個檔案。
三、總結
關於bootstrap fileinput的基礎使用大概就介紹完了,其實就是一個上傳的元件,也不存在什麼高階用法。重點是把介面做得更加友好,更好的增加使用者體驗。
2015-12-01
經過今早2個小時的忙碌,原始碼終於整理出來了。有興趣的下載看看。原始碼下載。
相關推薦
JS元件系列——Bootstrap檔案上傳元件:bootstrap fileinput
前言:之前的三篇介紹了下bootstrap table的一些常見用法,發現博主對這種扁平化的風格有點著迷了。前兩天做一個excel匯入的功能,前端使用原始的input type='file'這種標籤,效果不忍直視,於是博主下定決心要找一個好看的上傳元件換掉它。既然bootstrap開源,那麼社群肯定有很多關於
Bootstrap fileinput.js,最好用的檔案上傳元件
本篇介紹如何使用bootstrap fileinput.js(最好用的檔案上傳元件)來進行圖片的展示,上傳,包括springMVC後端檔案儲存。 一、demo 二、外掛引入 <link type="text/css" rel="stylesheet" h
Bootstrap框架---krajee外掛fileinput--最好用的檔案上傳元件----單多張圖片上傳互動方式三(推薦)
我們在前一章已經實現了 Bootstrap框架---Uploadify外掛----多張圖片上傳互動方式二 。本章主要關注單多張圖片上傳在Bootstrap框架中的佈局和實現。我們在之前的文章中已經在SpringMVC基礎框架的基礎上應用了BootStrap的後臺框架,在此基礎
Vue.js 3.0搭配.NET Core寫一個牛B的檔案上傳元件
在開發Web應用程式中,檔案上傳是經常用到的一個功能。 在Jquery時代,做上傳功能,一般找jQuery外掛就夠了,很少有人去探究上傳檔案外掛到底是怎麼做的。 簡單列一下我們要做的技術點和功能點 ## 使用技術 客戶端使用vue.js 3.0,並使用vue3新增的功能:**Composition API**
AjaxFileUpload檔案上傳元件 php jQuery ajax
分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!  
前端上傳元件WebUploader大檔案上傳與Python結合的實現
Python實現大檔案分片上傳 引言 想借著這篇文章簡要談談WebUploader大檔案上傳與Python結合的實現。 WebUploader是百度團隊對大檔案上傳的前端實現,而後端需要根據不同的語言自己實現。這裡我採用Python語言的Flask框架搭建後端,
JSP 實用程式之簡易檔案上傳元件
Edit:6-19 更新,提供了基於 Servlet(非 JSP)的元件下載,這是一個完整的 Java Web 專案,用 Eclipse 匯入即可,專案原始碼在這裡。檔案上傳,包括但不限於圖片上傳,是 Web 開發中司空見慣的場景,相信各位或多或少都曾寫過這方面相關的程式碼。
vuetify | vue | 檔案上傳元件 | file | upload | form input[type="file"]
今天無聊地寫vuecli3聽歌的時候,遇到了上傳檔案到Django的自我需求,然後就到vuetify的表單元件裡找upload btn,發現居然沒有!!! 頓時驚了個呆,要知道之前用element做作業系統課設的時候,還是挺全的。 這裡偷偷吐槽,vuetify的alert真的醜...... 這裡分享一個
解決FileUpLoad上傳控制元件,限制檔案上傳大小
系統預設上傳檔案大小4096KB,如果我們要上傳超過此大小的檔案,會出現錯誤介面等…… 其實,只要我們對web.config檔案做一下配置,就可以輕鬆搞定你的“難題”! 在配置檔案中新增如下程式碼: <configuration> <system.
Vuetify中檔案上傳元件
1.示例: 1.1.單圖片上傳: <v-upload v-model="brand.image" url="/item/upload" :multiple="false" :p
uploadify檔案上傳元件取消上傳按鈕圖片不顯示問題解決
低版本下,通過設定cancelImg引數,指向X圖片檔案所在的路徑。高版本(3.2.1)下,通過修改uploadify.css來解決,程式碼如下:.uploadify-queue-item .cancel a { background: url('uploadify-can
apache檔案上傳元件+oracle+SWFupload實現檔案上傳
來韓國三個月了,最近做的專案中韓國人要求上傳的檔案儲存到資料庫,讓人難以接受的是在上傳選擇檔案的時候他們要求能夠同時實現多檔案選擇並上傳,多選這個問題我以前沒做過,google一下,發現有很多辦法,最終發現了SWFupload元件,於是問題解決,現貼出程式碼以供以後備用和
SSH框架下使用Commons FileUpload控制元件完成多檔案上傳與下載
某些系統中,經常需要用到上傳與下載功能,其中,如果指定了不同角色上傳多不同檔案,並且指定給其他角色進行下載。那麼一般最好的方法就是將檔案按照不同路徑上傳到不同的資料夾中,然後再在資料庫中存入檔案路徑。 比如在教務系統中,學生要求上傳自己的作業,然後給教師進行下
檔案上傳元件的比較
在上傳量較小(容量<2M,這是最常出現的情況)時,Cos比FileUpload效能並沒有好很多,但SmartUpload就已經開始顯出弱勢。 隨著容量的增大,FileUpload和SmartUpload的效能下降非常快,直到200M容量時,SmartUpload
ASP.NET Core WEB API 使用element-ui檔案上傳元件el-upload執行手動檔案檔案,並在檔案上傳後清空檔案
前言: 從開始學習Vue到使用element-ui-admin已經有將近快兩年的時間了,在之前的開發中使用element-ui上傳元件el-upload都是直接使用檔案選取後立即選擇上傳,今天剛好做了一個和之前類似的檔案選擇上傳的需求,不過這次是需要手動點選按鈕把檔案上傳到伺服器中進行資料匯入,而且最多隻
node.js服務端處理檔案上傳的完整流程
在本文 微信小程式-從相簿獲取圖片 使用相機拍照 本地圖片上傳之前需要看看 微信小程式-獲取使用者session_key,openid,unionid - 後端為nodejs 程式碼封裝是在上文新增的。 本文知識點: 1、微信小程式選擇圖片wx.chooseImage()介
js+jstl+servlet實現檔案上傳、列表展示及檔案下載
檔案上傳 1.upload.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert
ASIHTTPRequest系列 三 檔案上傳
五、檔案上傳1、服務端檔案上傳需要服務端的配合。我們可在本機搭建tomcat測試環境。關於tomcat在MacOSX下的安裝配置,參考作者另一博文《安裝Tomcat到Mac OSX》。開啟Eclipse,新建web工程。在其中新建一個ServletUploadServlet:i
Js中清空檔案上傳欄位(input type=file )
表單中type=file欄位的value屬性無法由js來附值,一但選中某個檔案後,如果使用者不手動去清空那麼這個值將保留,提交表單時對應檔案也會被提交上去.當然在伺服器上會再次驗證,不過為了避免上傳不必要的的檔案,還是有必要提前在客戶端驗證失敗後將檔案上傳欄位清空.
基於Metronic的Bootstrap開發框架經驗總結(5)--Bootstrap檔案上傳外掛File Input的使用
Bootstrap檔案上傳外掛File Input是一個不錯的檔案上傳控制元件,但是搜尋使用到的案例不多,使用的時候,也是一步一個腳印一樣摸著石頭過河,這個控制元件在介面呈現上,叫我之前使用過的Uploadify 好看一些,功能也強大些,本文主要基於我自己的框架程式碼案例,介紹其中檔案上傳外掛File Inp