BootStrap fileinput.js文件上传组件实例代码

下面是BootStrap fileinput.js文件上传组件实例代码的完整攻略：

简介

fileinput.js是前端非常常见的文件上传组件，它基于jQuery和Bootstrap，并且可以灵活定制，适用于各种大小、类型、数量的文件上传。

安装

要使用fileinput.js组件，需要先引入以下两个文件：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

然后，下载fileinput.js文件并引入：

<script src="/path/to/fileinput.js" type="text/javascript"></script>

基本用法

HTML

下面是一个基本的HTML代码示例，其中<input>标签就是fileinput.js的关键所在，通过设置不同的属性来定制文件上传的需求：

<form>
  <input id="kv-file" type="file" name="avatar" class="file">
</form>

JavaScript

为了使fileinput组件生效，还需要在JavaScript代码中进行配置：

$("#kv-file").fileinput({
    uploadUrl: '/path/to/upload', // 上传URL
    allowedFileExtensions: ['jpg', 'png', 'gif'], // 允许上传的文件类型
    maxFileSize: 1000 // 允许上传的最大文件大小（KB）
});

可以看到，fileinput组件的所有选项都是通过对象字面量来表示的，其中一些常用选项的含义如下：

• uploadUrl: 上传文件的URL。
• allowedFileExtensions: 允许上传的文件类型，由一个字符串数组表示。
• maxFileSize: 允许上传的最大文件大小，单位为KB。

除此之外，还可以通过其他选项来调整组件的外观和行为，例如：

• showCaption: 是否显示文件名。
• previewFileType: 预览的文件类型，可以是image、text、html等。
• showUpload: 是否显示上传按钮。

高级用法

fileinput.js还支持更高级的用法，例如：

AJAX上传

我们可以通过设置uploadAsync选项为false，来禁用默认的表单上传方式，改用AJAX异步上传。当然，在此之前需要先配置好uploadUrl、allowedFileExtensions等选项。

$("#kv-file").fileinput({
    uploadAsync: false // 禁用默认的表单上传方式
});

然后，再通过jQuery的ajax()函数来实现上传：

$("#kv-file").on("filebatchuploadcomplete", function(event, files, extra) {
    var data = {
        name: $("#file-name").val(),
        desc: $("#file-desc").val()
    };
    $.ajax({
        url: '/path/to/handler',
        method: 'POST',
        data: data,
        success: function (res) {
            // 上传成功后的处理
        },
        error: function (res) {
            //上传失败后的处理
        }
    });
});

自定义上传样式

我们可以通过layoutTemplates选项来自定义上传组件的样式和布局。

$("#kv-file").fileinput({
    layoutTemplates: {
        preview: '<div class="file-preview {class}">\n' +
                     '    {close}\n' +
                     '    <div class="{dropClass}">\n' +
                     '        <div class="file-preview-thumbnails">\n' +
                     '        </div>\n' +
                     '        <div class="clearfix"></div>\n' +
                     '        <div class="upload-btn">\n' +
                     '            <button type="button" class="{uploadClass}" title="{uploadTitle}">{uploadIcon}{uploadLabel}</button>\n' +
                     '        </div>\n' +
                     '    </div>\n' +
                     '</div>',
    },
});

示例说明

示例1：上传图片到服务器

在这个示例中，我们演示如何使用fileinput.js上传图片到服务器。首先，我们需要准备一个可以接收上传请求的服务器，这里使用PHP脚本：

<?php
$allowed = array('png', 'jpg', 'gif');
if ($_FILES['file']['error'] !== UPLOAD_ERR_OK) {
    echo 'error';
    exit;
}
$ext = pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION);
if (!in_array($ext, $allowed)) {
    echo 'error';
    exit;
}
if (move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name'])) {
    echo 'success';
    exit;
} else {
    echo 'error';
    exit;
}
?>

然后，我们需要在HTML代码中添加以下内容：

<form>
  <input id="kv-file" type="file" name="avatar" class="file">
</form>

接下来，在JavaScript中进行配置：

$("#kv-file").fileinput({
    uploadUrl: '/upload.php', // 上传URL
    allowedFileExtensions: ['jpg', 'png', 'gif'], // 允许上传的文件类型
    maxFileSize: 1000 // 允许上传的最大文件大小（KB）
});

最后，我们再设置上传成功后的回调函数：

$("#kv-file").on("filebatchuploadsuccess", function(event, data) {
    alert("上传成功！");
});

示例2：上传文件到七牛云

在这个示例中，我们演示如何使用fileinput.js上传文件到七牛云。要实现这一点，我们需要先去七牛云上注册一个账号，然后创建一个存储空间，并获取其所属区域、空间名称和AccessKey、SecretKey等信息。

接下来，在HTML代码中添加以下内容：

<form>
  <input id="kv-file" type="file" name="avatar" class="file">
</form>

然后，我们需要在JavaScript代码中进行配置：

$("#kv-file").fileinput({
    uploadUrl: 'http://up.qiniu.com',
    uploadAsync: false,
    maxFileSize: 2000,
    allowedFileExtensions: ['pdf', 'doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx'],
    uploadExtraData: function () {
        var data = {
            token: token
        };
        return data;
    },
    layoutTemplates: {
        preview: ''
    },
    dropZoneEnabled: false
});

其中，uploadUrl为七牛云的上传地址，uploadAsync为禁用默认的表单上传方式，改用AJAX异步上传，maxFileSize和allowedFileExtensions分别设置了文件大小和类型，uploadExtraData用于上传防伪，通过返回一个对象来传递token信息，layoutTemplates中的preview选项设置为空，表示去掉预览功能，dropZoneEnabled表示禁用拖放上传。

最后，我们再通过以下方式来实现文件上传：

$("#kv-file").on("filebatchselected", function(event, files) {
    $("#kv-file").fileinput("upload");
});
$("#kv-file").on("filebatchuploadsuccess", function(event, data) {
    $.each(data.response, function (key, value) {
        console.log(value.hash);
    });
});

通过调用upload方法来上传文件，上传成功后打印文件的hash值。