最近用原生PHP开发一个项目，要求是：前端用 bootstrap-fileinput 做文件上传，后端用PHP处理。其实，最主要的作用就是用 bootstrap-fileinput 来上传图片。
注意：
用过bootstrap3的都知道， Bootstrap 3.x 版本，在 fonts 文件夹内可以找到字体图标，它默认是支持Glyphicons Halflings 字体图标的。虽然，Glyphicons Halflings 需要商业许可，但是我们可以通过基于项目的 Bootstrap 来免费使用这些图标。
但是，在bootstrap4的时候，我发现没有免费的字体图标了，根本都没有这个 fonts 文件夹。
而且，现在bootstrap4一般都是直接使用免费的 Font Awesome 图标。
因此，在使用“Bootstrap4 + Bootstrap Fileinput 文件上传”这个功能之前，请大家先去了解一下：
Bootstrap4 中使用 Font Awesome 字体图标 教程
一、前端代码
其实，前端这部份主要分为了以下几个步骤：
1、引入相关的JS和CSS，有一些是必须要引入的，这个得注意。
2、添加“上传”类型的文本框 。
3、script中初始化bootstrap-fileinput。
这里我就不分开上代码了，我直接把前端所有的代码发给大家看一下，重要的地方我都颜色标记出来了，大家可以简单的去看一下，做一个参考。
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎来到付杰博客：bootstrap-fileinput 文件上传</title>
<script src="/bootstrap-fileinput/jquery-3.5.1.min.js?x61917" crossorigin="anonymous"></script>
<link rel="stylesheet" href="/bootstrap-fileinput/bootstrap-4.1.3/css/bootstrap.min.css?x61917" crossorigin="anonymous">
<script src="/bootstrap-fileinput/bootstrap-4.1.3/js/bootstrap.min.js?x61917" crossorigin="anonymous"></script>
<link rel="stylesheet" href="/bootstrap-fileinput/bootstrap-fileinput/css/fileinput.min.css?x61917" crossorigin="anonymous">
<link rel="stylesheet" href="/bootstrap-fileinput/fontawesome-free-5.14.0-web/css/all.css?x61917" crossorigin="anonymous">
<!-- 如果你想在最初的预览中排序/重新排列需要引入sortable.min.js 它必须在fileinput.min.js之前引入 -->
<script src="/bootstrap-fileinput/bootstrap-fileinput/js/plugins/sortable.min.js?x61917" type="text/javascript"></script>
<!-- 如果你想在HTML文件预览中净化HTML内容则要引入purify.min.js is 它必须在fileinput.min.js之前引入 -->
<script src="/bootstrap-fileinput/bootstrap-fileinput/js/plugins/purify.min.js?x61917" type="text/javascript"></script>
<script src="/bootstrap-fileinput/bootstrap-fileinput/js/plugins/piexif.min.js?x61917" type="text/javascript"></script>
<!-- 主要的 fileinput 插件库 -->
<script src="/bootstrap-fileinput/bootstrap-fileinput/js/fileinput.min.js?x61917"></script>
<!-- 可选，如果你需要像font awesome 这样的主题，就像下面的代码一样引入它 -->
<!-- 可选，如果你需要转换语言或翻译，就包含这个库 -->
<script src="/bootstrap-fileinput/bootstrap-fileinput/js/locales/zh.js?x61917"></script>
<!--由于Bootstrap4默认没有免费图标了，必须引入模板文件，模板文件都是用的是 Font Awesome 字体图标-->
<script src="/bootstrap-fileinput/bootstrap-fileinput/themes/fas/theme.min.js?x61917"></script>
</head>
<body>
<div class="container my-4">
<form enctype="multipart/form-data">
<div class="file-loading">
<input id="input-703" name="kartik-input-703[]" type="file" multiple>
</div>
<button type="submit" class="btn btn-primary">提交</button>
<button type="reset" class="btn btn-outline-secondary">重置</button>
</form>
</div>
<script>
$(document).ready(function() { $("#input-703").fileinput({
theme: 'fas',
language: 'zh',
uploadUrl: "/bootstrap-fileinput/upload.php", // 服务器端上传处理程序
minFileCount: 1, //最小上传文件数为1
maxFileCount: 5, //最大上传文件数为5
multiple:true //异步上传
})
});
</script>
</body>
</html>
二、后端代码
用bootstrap-fileinput 在做上传文件这个功能时，当我们点击“上传”按钮的时候，要求“后端”必须给“前端”返回一个 json 格式的数据，如果不返回这个 json 格式的数据，你是不可能会上传成功的。
注意：fileinput.js源码里的fileinput()方法里面传入的是一个json数据，它里面有很多属性，每个属性代表着初始化上传控件的时候的特性，如果这些属性都不设置，则表示使用默认的设置。如下图：
由于时间有限，我这也是做一个测试，我的后端PHP代码如下：
upload.php
<?php
//header('Content-Type:application/json; charset=utf-8');
// ...
// 处理ajax上传并返回JSON响应的服务器代码。
// 你的服务器方法必须返回一个包含`initialPreview`、`initialPreviewConfig`和`append`的JSON对象。
// 一个PHP服务器代码示例如下：
// ...
//var_dump($_FILES);
//var_dump($_GET);
//var_dump($_POST);
if ($_FILES["kartik-input-703"]["name"]) {
$name=$_FILES["kartik-input-703"]["name"][0];
$target1 = time().$name;
$target = "./".$target1;
// echo $target;
$file = move_uploaded_file($_FILES['kartik-input-703']['tmp_name'][0], $target);
// echo $imagurl;
// echo '<br/>';
if ($file){
$key = $target1;
$url = 'http://127.0.0.1/bootstrap-fileinput/delete.php'; //你删除这个文件的服务器图片方法URL
$strjson = json_encode([
"initialPreview" =>[
"http://127.0.0.1/bootstrap-fileinput/$target1"
],
"initialPreviewConfig" => [
['caption' => "{$key}", 'size' => 627392, 'width' => '120px', 'url' => $url, 'key' => $key],
],
"append" => true // 是否把这些配置加入`initialPreview`。
// 如果设置为`false`，它会重载初始预览。
// 如果设置为`true`，它会加入初始预览之中。
// 如果这个属性没有被设置或者没有传出，它会默认为`true`。
],320);
echo $strjson;
}else {
echo json_encode(['error'=>'上传失败！']);
}
}
最终效果：
选择图片并点击上传时，如下图：
上传成功后效果如下图：
总结：
此 bootstrap-fileinput 图片上传的示例代码还不是很完整，像上图所示，上传成功后应该前端应该把缩略图显示出来的，还有所谓的前端点击删除按钮，图片也要被删除，后端还缺少这个功能，这里还没有做，由于时间有限，暂时先这样吧！
如果有不懂PHP代码中为什么要用 json_encode()函数的？请查看：
