Bootstrap Fileinput教程詳解

Bootstrap Fileinput 是一套基於 jQuery 的文件上傳插件，它可以讓用戶很方便地上傳文件、預覽圖片、選擇多個文件等等。在本文中，我們將介紹 Bootstrap Fileinput 的使用方法和一些常見問題的解決方案。

一、基本使用方法

使用 Bootstrap Fileinput 的第一步是引入相關文件：

<!-- 引入必要的文件 -->
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-fileinput/5.1.2/css/fileinput.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-fileinput/5.1.2/js/fileinput.min.js"></script>

接下來，我們需要在 HTML 中添加一個 input 元素作為文件上傳的目標：

<input id="upload-file" type="file" name="file" multiple>

在 JavaScript 中，我們可以使用如下代碼初始化文件上傳插件：

<script>
$(document).ready(function() {
    $('#upload-file').fileinput();
});
</script>

這樣一來，我們就可以使用 Bootstrap Fileinput 的基本上傳功能了。

二、其他功能

1. 預覽功能

Bootstrap Fileinput 不僅可以上傳文件，還可以在上傳之前或上傳之後對文件進行預覽。

<script>
$(document).ready(function() {
    $('#upload-file').fileinput({
        previewFileType: 'image',
        browseClass: "btn btn-primary btn-block",
        showCaption: false,
        showRemove: false,
        showUpload: false
    });
});
</script>

在這個例子中，我們只支持上傳圖片文件，並且隱藏了上傳、刪除和文件名等選項，只留下預覽。

2. 禁用功能

有時候，我們需要禁用文件上傳插件，這可以直接調用文件上傳插件的 enable 或 disable 方法完成。

<script>
$(document).ready(function() {
    $('#upload-file').fileinput({
        // ...
    });
    $('#disable-btn').click(function() {
        $('#upload-file').fileinput('disable');
    });
    $('#enable-btn').click(function() {
        $('#upload-file').fileinput('enable');
    });
});
</script>

這裡我們創建了兩個按鈕，用來啟用/禁用文件上傳插件。需要注意的是，disable/enable 方法是由文件上傳插件提供的，在這裡我們只是調用這個方法實現啟用或禁用。

3. 驗證功能

有時候，我們需要在上傳之前對文件進行一些驗證。Bootstrap Fileinput 常用的文件驗證包括文件類型、文件大小和文件數量等等。

<script>
$(document).ready(function() {
    $('#upload-file').fileinput({
        // ...
        allowedFileTypes: ['image', 'pdf'],
        maxFileSize: 1000, // 單位為 KB
        maxFilesNum: 5,
        minFilesNum: 1
    });
});
</script>

在這個例子中，我們僅接受圖片和 PDF 文件。文件大小限制為 1000 KB，同時最多上傳 5 個、最少上傳 1 個文件。

三、常見問題

1. 上傳文件大小限制無效

如果文件上傳插件的文件大小限制無效，那麼可能是 PHP 伺服器設置了文件上傳大小限制。

<?php
// 設置上傳文件大小限制為 10 MB
ini_set("upload_max_filesize", "10M");
?>

需要在代碼中設置php.ini文件的 upload_max_filesize 參數。

2. 文件上傳失敗

如果上傳文件失敗，最常見的原因就是文件太大或者上傳過程中出了一些意料之外的錯誤。

為了防止這種情況，我們可以在 PHP 中設置最大上傳文件大小，以及錯誤處理機制。

// 設置上傳文件的最大大小[10MB]
ini_set("upload_max_filesize", "10M");

// 設置上傳文件的錯誤處理，這裡我們只是簡單地輸出錯誤信息
if ($_FILES['file']['error'] > 0) {
    echo "Return Code: " . $_FILES['file']['error'] . "<br />";
}
else {
    // 如果上傳文件成功，這裡添加處理代碼
}

3. 文件預覽失敗

Bootstrap Fileinput 默認使用 HTML5 FileReader 來預覽上傳文件。然而，有時候可能會由於瀏覽器不支持 FileReader API 或者文件損壞等原因導致文件預覽失敗。

解決這個問題可以使用服務端像php、python等來渲染呈現。

<script>
$(document).ready(function() {
    $('#upload-file').fileinput({
    	//...
    	initialPreview: [
    		'<img src="http://example.com/path/to/image.jpg" class="file-preview-image" alt="文檔_1.jpg" title="文檔_1.jpg">',
    		'<img src="http://example.com/path/to/image2.jpg" class="file-preview-image" alt="文檔_2.jpg" title="文檔_2.jpg">',
    	],
    	initialPreviewConfig: [
    		{caption: "文檔_1.jpg", width: "120px", url: "/path/to/delete", key: 1},
    		{caption: "文檔_2.jpg", width: "120px", url: "/path/to/delete", key: 2},
    	]
    });
});
</script>

結論

Bootstrap Fileinput 是一款功能強大的文件上傳插件，幫助用戶輕鬆完成文件上傳、預覽和驗證等操作，同時也提供了解決常見問題的方法。希望本文能為大家提供一些參考，幫助大家有效使用 Bootstrap Fileinput。