Bootstrap fileinput 同步上传时回调处理

wqr111

已于 2022-02-25 13:29:09 修改

阅读量3.9k

点赞数 1

分类专栏： bootstrap 文章标签： bootstrap javascript 前端

于 2022-02-25 13:12:50 首次发布

本文链接：https://blog.youkuaiyun.com/wqr111/article/details/123126714

版权

bootstrap 专栏收录该内容

4 篇文章

订阅专栏

本文档详细介绍了BootStrap-fileinput插件的使用方法，包括配置选项、事件监听和异常处理。插件支持同步和异步上传，提供了丰富的回调函数如filebatchuploadsuccess和fileuploaded，以及文件类型限制、上传限制等设置，帮助开发者实现自定义的文件上传功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官方文档中文网
http://bootstrap-fileinput.com/events.html

首先引入bootStrap-fileinput的css和js文件

注意：这里区分了是同步还是异步
同步的回调走 filebatchuploadsuccess
异步的回调走 fileuploaded

配置项

uploadAsync: false,//同步上传（反之异步）

language

字符串，这个插件的语言配置，它可以使这个插件的展示信息用你所在地区的语言来表达（你必须设置自己语言的ISO编码）。你可以在同一个页面上展示多种语言的插件。你必须按照之前在翻译部分介绍的那样定义区域语言编码JS文件。这个文件必须在fileinput.js后面加载。

showCaption

布尔值，是否显示文件名。默认值为true。

showPreview

布尔值，是否显示文件预览。默认值为true。

showRemove

布尔值，是否显示删除/清除按钮。默认值为true。

showUpload

布尔值，是否显示文件上传按钮。默认值为true。它默认为一个表单提交按钮，除非指定了uploadUrl属性。

showCancel

布尔值，是否显示文件上传取消按钮。默认值为true。只有在AJAX上传过程中，才会启用和显示。

showClose

布尔值，是否显示预览界面的关闭图标。默认为true。只有当showPreview为true或者在预览模板中使用{close}标签时才会被解析。

showUploadedThumbs

布尔值，是否在预览窗口中持续显示已经上传的文件缩略图（用于ajax上传），直到按下删除/清除按钮。默认值为true。当设置为false时，下一批选择上传的文件将从预览中清除这些已经上传的文件缩略图。

showBrowse

布尔值，是否显示文件浏览按钮。默认为true。

browseOnZoneClick

布尔值，是否在点击预览区域时触发文件浏览/选择。默认为false。

autoReplace

布尔值，当上传文件达到maxFileCount限制并且一些新的文件被选择后，是否自动替换预览中的文件。如果maxFileCount值有效，那么这个参数会起作用。默认为false。

overwriteInitial

布尔值，是否要覆盖初始预览内容和标题设置。默认为true，因此当新文件上传或文件被清除时任何initialPreview内容集将被覆盖。将其设置为false将有助于始终显示从数据库中保存的图像或文件，尤其是在使用多文件上传功能时尤其有用。

uploadurl

上传的后端地址

allowedFileExtensions

数组允许上传的文件扩展名列表。默认情况下，此插件设置为NULL，这意味着插件支持上传的所有文件扩展名。如果找到无效的文件扩展名，则会引发msgInvalidFileExtenence中设置的验证错误消息。设置这种情况的一个例子可以是：

['jpg', 'gif', 'png', 'txt']

maxFileCount

每次多次上载所允许的最大文件数。如果设置为0，就意味着允许的文件数是无限的。默认为0。

minFileCount

允许每次多次上传的最少文件数。如果设置为0，则意味着文件数是可选的。默认为0。

msgFilesTooMany

字符串时，当文件数超过maxFileCount中设置的最大计数时将显示的消息。默认为

选择上传文件数量{n} 超过允许最大数量

msgFilesTooLess

字符串，当文件计数小于minFileCount中设置的最小计数时，将显示消息。默认为

选择上传文件数量{n} 小于允许最小数量

事件

filebatchselected（选择及触发）

在预览中选择并显示一批文件后触发此事件。附加参数有：

files：文件对象实例（如果FileReader不可用，则为空对象）。

范例：

$('#input-id').on('filebatchselected', function(event, files) {
    console.log('File batch selected triggered');
});

fileuploaded（异步执行）

此事件仅在ajax上传且上载每个缩略图文件之后触发。此事件只有是AJAX上传并在以下场景才会触发：

当单击每个预览缩略图中的上传图标并且文件上传成功时，或者
当你将uploadAsync设置为true并且已触发批量上传时。在这种情况下，fileuploaded事件在每个单独的选定文件成功上传之后被触发。

此事件可用的其他参数：

data：这是一个数据对象（关联数组），它发送以下信息，其关键字是：
- form：FormData，通过XHR2传递的对象（如果不可用，则为空对象）。
- files: 数组，文件栈数组（如果不可用，则为空对象）。
- filenames：数组，堆栈数组中每个文件的客户端文件名（如果不可用，则为空对象）。
- filescount: int，所选文件的计数包括已经上传的文件（基本上返回getFilesCount方法的输出）。
- extra：该插件的uploadExtraData设置（如果不可用，则为空对象）。
- response：通过ajax响应发送的数据（如果不可用，则为空对象）（重要）。
- reader：FileReader实例，如果可用。
- jqXHR：用于此事务的jQuery XMLHttpRequest对象（如果可用）。
previewId：预览窗口中每个文件的缩略图div父节点的id。

index：预览列表中加载的文件的基于0的顺序索引

$('#input-id').on('fileuploaded', function(event, data, previewId, index) {
  var form = data.form, files = data.files, extra = data.extra,
      response = data.response, reader = data.reader;
  console.log('File uploaded triggered');
});

filebatchuploadsuccess（同步执行）

此事件仅在ajax上传且文件批量上传成功之后触发。此事件只有是AJAX上传并在以下场景才会触发：

当你将uploadAsync设置为false并且已经触发了批量上传时。在这种情况下，在所以文件成功上传后会触发filebatchuploadsuccess事件。

附加参数有：

data：这是一个数据对象（关联数组），它发送以下信息，其关键字是：
- form：FormData，通过XHR2传递的对象（如果不可用，则为空对象）。
- files：数组，文件栈数组（如果不可用，则为空对象）。
- filenames：数组，堆栈数组中每个文件的客户端文件名（如果不可用，则为空对象）。
- filescount：int，所选文件的计数包括已经上传的文件（基本上返回getFilesCount方法的输出）。
- extra：该插件的uploadExtraData设置（如果不可用，则为空对象）。
- response：通过ajax响应发送的数据（如果不可用，则为空对象）。
- reader：FileReader实例，如果可用。
- jqXHR：用于此事务的jQuery XMLHttpRequest对象（如果可用）。

$('#input-id').on('filebatchuploadsuccess', function(event, data, previewId, index) {
    var form = data.form, files = data.files, extra = data.extra,
        response = data.response, reader = data.reader;
    console.log('File batch upload success');
});

异常事件

用于文件验证错误的事件。

fileerror（异常报错）

当上传文件客户端验证错误时，会触发此事件。它允许传入对象data作为参数。

data：包含下面关键字的对象/关联数组。
- id：预览缩略图标识符id（如果不可用，则为undefined）
- index：文件索引或者预览缩略图索引（如果不可用，则为undefined）
- file：文件对象（如果不可用，则为undefined）
- reader：文件读取器实例（如果不可用，则为undefined）
- files：文件堆数组（如果不可用，则为undefined）
msg：字符串，生成的错误信息

范例：

$('#input-id').on('fileerror', function(event, data, msg) {
   console.log(data.id);
   console.log(data.index);
   console.log(data.file);
   console.log(data.reader);
   console.log(data.files);
   // 获取信息
   alert(msg);
});

fileuploaderror（异步报错）

此事件仅在ajax上传时触发，并且主要针对ajax上传时遇到上载或文件输入验证错误。此事件仅针对ajax上传并在以下情况下触发：

当每个预览缩略图中的上传图标被点击并且文件面临上传中的验证错误时，或者
当你将uploadAsync设置为true并且已触发批量上传时。在这种情况下，在任何所选文件面临上传验证错误后，会触发fileuploaderror事件。

此事件可用的附加参数有：

data：这是一个数据对象（关联数组），它发送以下信息，其关键字是：
- id：预览缩略图的标识符（如果不可用，则为空对象）。
- index：文件索引或者预览缩略图索引（如果不可用，则为空对象）。
- form：FormData，通过XHR2传递的对象（如果不可用，则为空对象）。
- files：数组，文件栈数组（如果不可用，则为空对象）。
- filenames：数组，堆栈数组中每个文件的客户端文件名（如果不可用，则为空对象）。
- filescount：int，所选文件的计数包括已经上传的文件（基本上返回getFilesCount方法的输出）。
- extra：该插件的uploadExtraData设置（如果不可用，则为空对象）。
- response：通过ajax响应发送的数据（如果不可用，则为空对象）。
- reader：FileReader实例，如果可用。
- jqXHR：用于此事务的jQuery XMLHttpRequest对象（如果可用）。

msg：字符串，生成的错误信息。

$('#input-id').on('fileuploaderror', function(event, data, msg) {
  var form = data.form, files = data.files, extra = data.extra,
      response = data.response, reader = data.reader;
  console.log('File upload error');
 // 获取信息
 alert(msg);
});

简易例子

//初始化头像上传插件
            $("#portrait").fileinput({
                language: 'zh', //设置语言
                elErrorContainer: '#kartik-file-errors',
                allowedFileExtensions: ["jpg", "JPG", "jpeg", "JPEG", "png", "gif"],
                dropZoneEnabled: false,
                maxFileCount: 1,
                uploadAsync: false,//异步上传
                uploadUrl: "../upload/file/1",//图片上传的url
                enctype:'multipart/form-data',
                previewFileIcon: "",
                maxImageWidth: 200,
                resizeImage: false,
                showPreview: false
            }).on("filebatchselected", function (event, data) {//选择即上传
                if (data.length == 0) {
                    return;
                }
            }).on('fileuploaded', function (event, data) {//异步上传成功结果处理

            }).on('fileerror', function (event, data, msg) {//异步上传失败结果处理
                console.log(event, data, msg);
            }).on('fileuploaderror', function (event, data, msg) {//异步上传失败结果处理
                console.log(event, data, msg);
            }).on('filebatchuploadsuccess', function(event,data,previewId,index) {//同步上传回调
               
            });;