深入理解Bootstrap FileInput

Bootstrap FileInput是Bootstrap風格的jQuery插件，用於文件（包括圖像、視頻等）選擇、上傳、編輯和管理。它支持多種文件格式、可預覽文件內容、可配置參數和事件函數，並提供了豐富的API接口。通過深入理解Bootstrap FileInput，可以幫助我們更好地掌握前端開發、提高用戶體驗和效率。

一、基礎使用

Bootstrap FileInput的基礎使用非常簡單，只需要引入必要資源並調用相應函數，即可創建出一個默認的文件選擇框。可以使用瀏覽器開發工具來進行調試和查看。


<link href="https://cdn.bootcss.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入CSS資源 -->
<link href="https://cdn.bootcss.com/bootstrap-fileinput/5.0.9/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
<!-- 引入JS資源 -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.slim.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-fileinput/5.0.9/js/fileinput.min.js"></script>
<script>
$(document).ready(function() {
    $("#file-1").fileinput(); // 初始化文件選擇框
});
</script>
<!-- HTML代碼 -->
<input id="file-1" type="file" name="file" />

經過初始化後，可以在網頁上看到一個可選擇文件的框，並且可以上傳文件。但是如果上傳的文件是圖像、視頻等媒體文件，由於文件的格式和大小不同，可能會造成頁面布局錯亂或上傳速度慢等問題。因此需要進一步優化和配置。

二、高級配置

Bootstrap FileInput提供了豐富的配置選項，可以根據需要進行調整和定製。以下是一些常用的高級配置選項示例。

1、主題

Bootstrap FileInput支持多種主題選擇，可以通過修改CSS資源文件進行切換。例如，引入不同的CSS文件即可切換到Material Design、Font Awesome等主題，或自定義主題。下面是一個使用Material Design主題的示例：


<link href="https://cdn.bootcss.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入Material Design CSS資源 -->
<link href="https://cdn.bootcss.com/bootstrap-fileinput/5.0.9/themes/explorer-fas/theme.min.css" media="all" rel="stylesheet" type="text/css" />
<!-- 引入JS資源 -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.slim.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-fileinput/5.0.9/js/fileinput.min.js"></script>
<script>
$(document).ready(function() {
    $("#file-1").fileinput({
        theme: 'explorer-fas', // 使用Material Design主題
    });
});
</script>
<!-- HTML代碼 -->
<input id="file-1" type="file" name="file" />

其他主題的CSS文件可以在Bootstrap FileInput的官方網站上下載和查看。

2、文件格式驗證

Bootstrap FileInput支持通過正則表達式或擴展名、MIME類型等規則進行文件格式驗證。例如，可以只允許上傳圖像文件和PDF文件，或不允許上傳大於5MB的文件等。下面是一個只允許上傳JPG、PNG圖像文件和PDF文件，且文件大小不超過2MB的示例：


<link href="https://cdn.bootcss.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入CSS資源 -->
<link href="https://cdn.bootcss.com/bootstrap-fileinput/5.0.9/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
<!-- 引入JS資源 -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.slim.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-fileinput/5.0.9/js/fileinput.min.js"></script>
<script language="javascript">
$(document).ready(function() {
    $("#file-1").fileinput({
        allowedFileExtensions: ['jpg', 'png', 'pdf'], // 允許的文件擴展名
        maxFileSize: 2048, // 允許的文件最大大小，單位KB
        overwriteInitial: false, // 不覆蓋原始預覽文件內容
        validateInitialCount: true, // 驗證文件數量
        previewFileIcon: '<i class="fas fa-file-alt kv-caption-icon"></i>',
    });
});
</script>
<!-- HTML代碼 -->
<input id="file-1" type="file" name="file" />

在此示例中，allowedFileExtensions選項設置為只允許上傳JPG、PNG和PDF格式的文件，maxFileSize選項設置為2MB，overwriteInitial選項設置為false表示不覆蓋原始預覽文件內容，validateInitialCount選項設置為true表示驗證文件數量（在此之前已經預覽的文件不計入數量），previewFileIcon選項設置一個文件預覽的圖標，用於區分不同類型的文件。

3、Ajax上傳

Bootstrap FileInput支持通過Ajax方式進行文件上傳，可以對上傳結果進行處理和反饋。Ajax方式可以避免頁面重載和數據丟失等問題，提高用戶體驗和效率。例如，可以在文件上傳後顯示上傳結果和文件名稱等信息。下面是一個使用Ajax方式上傳並顯示文件名稱的示例：


<link href="https://cdn.bootcss.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入CSS資源 -->
<link href="https://cdn.bootcss.com/bootstrap-fileinput/5.0.9/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
<!-- 引入JS資源 -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.slim.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-fileinput/5.0.9/js/fileinput.min.js"></script>
<script language="javascript">
$(document).ready(function() {
    $("#file-1").fileinput({
        uploadUrl: '/upload', // 上傳接口URL，需自行實現
        allowedFileExtensions: ['jpg', 'png', 'pdf'], // 允許的文件擴展名
        maxFileSize: 2048, // 允許的文件最大大小，單位KB
        overwriteInitial: false, // 不覆蓋原始預覽文件內容
        validateInitialCount: true, // 驗證文件數量
        previewFileIcon: '<i class="fas fa-file-alt kv-caption-icon"></i>',
        uploadAsync: true, // 使用異步方式上傳
        showUpload: false, // 不顯示上傳按鈕
        showPreview: false, // 不顯示文件預覽
        showCaption: true, // 顯示文件名稱
        layoutTemplates: { // 自定義布局模板
            actionDelete:'<i class="fas fa-trash-alt remove"></i>',
        },
    }).on("filebatchselected", function(event, files) { // 選擇上傳文件後觸發該事件
        $(this).fileinput("upload"); // 手動上傳
    }).on("fileuploaded", function(event, data) { // 文件上傳成功後觸發該事件
        console.log(data.response.filename); // 顯示文件名
    });
});
</script>
<!-- HTML代碼 -->
<input id="file-1" type="file" name="file" />

在此示例中，uploadUrl選項設置為上傳接口的URL地址，allowedFileExtensions和maxFileSize選項同上，uploadAsync選項設置為true表示使用異步方式上傳，showUpload和showPreview等選項設置為false表示隱藏上傳按鈕和文件預覽，showCaption選項設置為true表示顯示文件名稱，layoutTemplates選項自定義刪除按鈕的HTML代碼。

4、本地化

Bootstrap FileInput支持多種語言本地化，可以根據用戶的語言環境自動顯示相應的提示信息。例如，可以顯示中文的提示信息、按鈕標籤等。下面是一個使用中文的本地化示例：


<link href="https://cdn.bootcss.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入CSS資源 -->
<link href="https://cdn.bootcss.com/bootstrap-fileinput/5.0.9/css/fileinput-locale-zh.min.css" media="all" rel="stylesheet" type="text/css" />
<!-- 引入JS資源 -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.slim.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-fileinput/5.0.9/js/fileinput.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-fileinput/5.0.9/js/locales/zh.min.js"></script>
<script language="javascript">
$(document).ready(function() {
    $("#file-1").fileinput({
        language: 'zh', // 使用中文本地化
    });
});
</script>
<!-- HTML代碼 -->
<input id="file-1" type="file" name="file" />

在此示例中，引入了中文本地化資源文件fileinput-locale-zh.min.css和zh.min.j，並將language選項設置為’zh’。

三、總結

Bootstrap FileInput是一個非常強大和實用的jQuery插件，它的靈活性和擴展性可以滿足大多數文件上傳和管理的需求。我們可以通過基礎使用和高級配置兩個方面來深入理解Bootstrap FileInput，熟練掌握其API接口和事件函數，並創造性地運用它來提高我們的開發效率和用戶體驗。

原創文章，作者：VEIJQ，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/369666.html