bootstrap-fileinput 是 Bootstrap 的一个文件上传插件，功能很强大，这次就用它简单的写了一个上传的 demo。

fileinput 介绍

特点：
首先它提供上传文件的预览，比如图片、文本、html、视频、声音、flash 等。
基于 AJAX，利用 html5 Formdata 和 XHR2 协议上传、可拖拽、移除文件、可视化的上传进度条，多种浏览器支持等。

详细介绍请看 GitHub。
github 源码 在线 API Demo 展示

页面

既然是插件就肯定要先引用它的 css 和 js 啦，加上中文支持文件 zh.js。
再加 boostrap 文件（该插件是基于 Bootstrap 3.x）和 jQuery 文件，所以先引用 6 个文件

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/fileinput.min.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/fileinput.min.js"></script>
<script type="text/javascript" src="js/locales/zh.js"></script>

页面代码里，我们先写一个文件控件，id 为 file

<input id="file" class="file" type="file" name="file" />

然后我们简单初始化一下 fileinput 控件

// 初始化fileinput控件
$('#file').fileinput({
  language: 'zh', // 设置语言
  uploadUrl: 'upload.php', // 上传地址
  allowedFileExtensions: ['jpg', 'png', 'gif'], // 允许上传文件的后缀
  overwriteInitial: false, // 设置语言
  maxFileSize: 10000, // 单个文件最大尺寸
  maxFilesNum: 10, // 最多上传数量
  allowedFileTypes: ['image', 'video', 'flash', 'music'], // 允许上传文件的类型
  slugCallback: function (filename) {
    return filename.replace('(', '_').replace(']', '_')
  }
})

这时候向我们走来的是来自美化后的上传控件里的永琪~~~~

咦，这有个预览功能，我再拖个音乐和视频来看看
来了一首 Black Sheep(想走路挨打的话，可以去听听)和 Girl Crush，视频和音频预览也 ok

后台

这时候我们再新建一个 upload.php 文件，来接收发来的文件
首先判断下有没有 name 为 file 的文件，没有的话，友好的返回一下

// upload.php
if (empty($_FILES['file'])) {
    // No files found for upload.
    echo json_encode(['error'=>'你干啥，想干啥']);
    return;
}

有的话，继续获取文件信息，比如文件名、文件类型、文件大小、文件临时路径

// 获取上传的文件
$images = $_FILES['file'];

// 文件名
$filenames = $images['name'];

// 文件类型
$filetypes = $images['type'];

// 文件大小
$filesizes = $images['size'];

// 文件临时路径
$filetmps = $images['tmp_name'];

$\_FILES[‘file’][tmp_name]是个啥？它保存的是文件上传到服务器临时文件路径，临时文件的生存周期与处理上传的 php 程序相同，即程序结束，临时文件消失。

所以下面我们要把临时文件移动到我们指定的文件夹下

// 上传成功与否flag
$success = null;


// 接收上传的文件
for($i=0; $i < count($filenames); $i++){
    //将文件名按 “.” 分割成数组
    $ext = explode('.', basename($filenames));
    //上传到服务器的路径（文件名用uniqid和md5生成 不重复唯一）
    $target = "upload" . DIRECTORY_SEPARATOR . md5(uniqid()) . "." . array_pop($ext);
    //tmp_name 为上传文件的临时位置，将其移动到需要上传的路径
    if(move_uploaded_file($filetmps, $target)) {
        $success = true;
    } else {
        $success = false;
        break;
    }
}

if ($success === true) {
    // 成功的处理
    $output = ['success'=>'上传成功'];
} elseif ($success === false) {
    // 失败的处理
    $output = ['error'=>'上传失败'];
} else {
    //其他处理
    $output = ['error'=>'不知道啥'];
}

最后的最后，将结果返回

// 返回json
echo json_encode($output);

好啦，我们回到刚才的页面，上传一下试试

再到我们指定的文件路径下看看，有没有这 3 个文件

哎呀，我们永琪过来啦