bootstrap fileinput完整實例分享
更新時間：2016年11月08日 09:31:08 作者：y酒味i
這篇文章主要為大家分享文件上傳組件bootstrap fileinput完整實例,具有一定的參考價值，感興趣的小伙伴們可以參考一下
本篇介紹如何使用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,//是否顯示拖拽區(qū)域
//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實戰(zhàn)教程
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了使用JavaScript通過前端發(fā)送電子郵件,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了微信小程序從注冊賬號到上架詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了如何創(chuàng)建?JavaScript?自定義事件，我們將通過文章學習到有關創(chuàng)建自定義事件，偵聽自定義事件以及創(chuàng)建雙擊自定義事件所要了解的內容,需要的朋友可以參考一下2022-05-05
這篇文章主要為大家詳細介紹了JavaScript數據類型，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
下面小編就為大家?guī)硪黄狫avaScript 消息框效果【實現代碼】。小編覺得挺不錯的，現在分享給大家，也給大家做個參考2016-04-04
JavaScript 開發(fā)規(guī)范要求(圖文并茂)
作為一名開發(fā)人員（WEB前端JavaScript開發(fā)），不規(guī)范的開發(fā)不僅使日后代碼維護變的困難，同時也不利于團隊的合作，通常還會帶來代碼安全以及執(zhí)行效率上的問題。2010-06-06
在本篇文章里小編給大家分享了關于JavaScript禁用右鍵單擊優(yōu)缺點分析，有需要的朋友們學習下。2019-01-01
本文主要分享了js實現PC端根據IP定位當前城市地理位置的方法，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章用實例代碼講述了JavaScript如何獲取頁面圖片原始尺寸的方法，現在分享給大家供大家參考學習，有需要的可以一起來看看。2016-09-09
JavaScript必知必會(六) delete in instanceof
這篇文章主要介紹了JavaScript必知必會(六) delete in instanceof的相關資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06