Bootstrap文件上传组件之bootstrap fileinput

以下是关于Bootstrap文件上传组件之bootstrap fileinput的完整攻略，包含两个示例说明：

什么是Bootstrap文件上传组件之bootstrap fileinput？

Bootstrap文件上传组件之bootstrap fileinput是一款基于Bootstrap框架开发的文件上传插件，它支持ajax上传、拖拽上传、剪裁/缩放图片和预览等功能。可以应用于各种Web项目中的文件上传需求，例如博客发表、图片上传和Markdown编辑器等。

如何完成Bootstrap文件上传组件之bootstrap fileinput的安装和使用？

安装

方式1：下载源码

从GitHub下载最新的bootstrap-fileinput源码，解压后把/dist文件夹中的内容复制到您的项目中即可。

方式2：使用CDN服务

另一种简便的方法是使用CDN服务，只需要在HTML中引用CSS和JS文件即可，如下所示：

<!-- 加载CSS -->
<link href="https://cdn.bootcss.com/bootstrap-fileinput/4.5.2/css/fileinput.min.css" rel="stylesheet">
<!-- 加载JS -->
<script src="https://cdn.bootcss.com/bootstrap-fileinput/4.5.2/js/fileinput.min.js"></script>

使用

在HTML代码中添加一个文件上传的input组件即可，如下：

<input id="input-1" type="file" class="file" data-preview-file-type="text" multiple>

其中data-preview-file-type控制预览区的文件类型，multiple表示可以多选文件。注意每个input都需要一个独立的id，这个id需要在JS代码中使用。

接下来，在JS代码中使用下面的代码启动文件上传组件。这个例子演示了在初始加载时就自动上传一个文件，并且禁用了删除和重新上传按钮。

$("#input-1").fileinput({
    uploadUrl: "/file-upload",
    autoUpload: true,
    showUpload: false,
    showRemove: false,
    showCancel: false,
    showPreview: true,
    uploadAsync: true,
});

示例说明

示例1：使用ajax上传文件

在上面的JS代码中，添加一个事件处理函数：fileuploaded。这个函数在文件上传成功后调用，可以在函数中处理服务器返回的JSON数据。

$("#input-1").fileinput({
    uploadUrl: "/file-upload",
    autoUpload: true,
    showUpload: false,
    showRemove: false,
    showCancel: false,
    showPreview: true,
    uploadAsync: true,
}).on("fileuploaded", function(event, data, previewId, index) {
    var response = data.response;
    alert("上传成功：" + response.fileName + " " + response.fileSize);
});

当然，你需要在服务器端编写一个接口来处理文件上传请求并返回JSON格式的结果。在本例中，文件上传到服务器后，服务器会返回一个JSON数据，包括文件名和文件大小。

这是一个使用ajax上传文件的案例，可以使用类似如下的代码配置fileinput组件进行文件上传，并结合上述的后端代码实现ajax上传功能。

示例2：剪裁上传的图片

在上面的JS代码中，添加下面的配置即可启用图片剪裁功能。在图片上传后，会出现一个剪裁框，可以点击并拖拽来裁剪图片。裁剪后，可以预览并上传裁剪后的图片。

$("#input-file").fileinput({
    uploadUrl: '/file-upload',
    autoUpload: true,
    previewSettings: {
        image: {width: "auto", height: "160px"}
    },
    allowedFileExtensions: ["jpg", "jpeg", "png", "bmp"],
    maxFileSize: 10000,
    maxFilePreviewSize: 10240,
    showCancel: false,
    showUpload: false,
    showRemove: false,
    showPreview: true,
    uploadAsync: true,
    initialPreview: [
        "<img src='/img/picture1.jpg' class='file-preview-image' alt='图片1' title='图片1' style='max-height:160px'>",
        "<img src='/img/picture2.jpg' class='file-preview-image' alt='图片2' title='图片2' style='max-height:160px'>",
    ],
    initialPreviewConfig: [
        {caption: "图片1", downloadUrl: "/img/picture1.jpg"},
        {caption: "图片2", downloadUrl: "/img/picture2.jpg"},
    ],
    fileActionSettings: {showZoom: true, showRemove: false},
    theme: "fa",
}).on("filezoomshown", function(event, data, previewId, index) {
    var $modal = $("#file-zoom-modal");
    var $image = $modal.find(".modal-body img");
    $image.attr("src", $("#"+previewId+" .file-preview-image").attr("src"));
    $image.cropper({
        aspectRatio: NaN,
        viewMode: 2,
        crop: function(event) {
            $("#file-upload-data").val(JSON.stringify(event.detail));
        }
    });
    $modal.modal("show");
});

这是一个演示了如何剪裁上传的图片的案例，在这个例子中，剪裁和上传的逻辑可以通过服务器端的接口根据需求完成。为了实现这个功能，我们在fileinput组件中添加了一个回调函数filezoomshown，该函数会在剪裁图片的时候调用。在事件处理函数中，我们使用了cropper.js插件来实现图片剪裁的功能。这里需要注意的是，由于cropper.js是一个第三方插件，所以我们还需要在HTML文件中加载cropper.js和cropper.min.css文件。

这是一个演示了如何使用Bootstrap文件上传组件之bootstrap fileinput进行图片上传和剪裁的案例，可以根据实际的需求进行相应的配置和调整。