DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> bootstrap fileinput完整實例分享
bootstrap fileinput完整實例分享
編輯:關於JavaScript     

本篇介紹如何使用bootstrap fileinput.js,file input插件功能如此強大,樣式非常美觀,並且支持上傳文件預覽,ajax同步或異步上傳,拖曳文件上傳等炫酷的功能,最好用的文件上傳組件。

文件夾結構

版本都是3.x

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <title> New Document </title>
 <meta name="Generator" content="EditPlus">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 <link href="bootstrap-3.3.5/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap-fileinput-master/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="jquery-2.1.1.min.js"></script>x
<script src="bootstrap-fileinput-master/js/plugins/canvas-to-blob.min.js" type="text/javascript"></script>
<script src="bootstrap-fileinput-master/js/fileinput.min.js"></script>
<script src="bootstrap-3.3.5/dist/js/bootstrap.min.js" type="text/javascript"></script>
<script src="bootstrap-fileinput-master/js/fileinput_locale_zh.js"></script>
 </head>

 <body>
<form>
 <div class="" 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>
 </body>
</html>

<script>
$(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;
};
</script> 

知識只有共享才能傳播,才能推崇出新的知識,才能學到更多,這裡寫的每一篇文字/博客,基本都是從網上查詢了一下資料然後記錄下來,也有些是原滋原味搬了過來,也有時加了一些自己的想法,希望大家喜歡。

如果大家還想深入學習,可以點擊這裡進行學習,再為大家附兩個精彩的專題:Bootstrap學習教程 Bootstrap實戰教程

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved