boostrap-fileinput上传插件

最新推荐文章于 2025-07-11 14:45:08 发布

原创最新推荐文章于 2025-07-11 14:45:08 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

boostrap 同时被 2 个专栏收录

1 篇文章

订阅专栏

插件那些事儿

1 篇文章

订阅专栏

Bootstrap-fileinput是一个流行的文件上传插件，支持异步和同步上传模式。在异步上传中，服务器需要返回JSON数据，包括错误信息、预览内容和配置。同步上传则一次性发送所有文件数据，服务器响应同样需要JSON格式，包含错误信息和文件预览配置。初始化设置和选项调整是关键步骤，确保上传功能正常运行。

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

信息来源于网上，方便以后有机会使用。

1.一些必要文件的引入

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/plugins/piexif.min.js" type="text/javascript"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/plugins/sortable.min.js" type="text/javascript"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/plugins/purify.min.js" type="text/javascript"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" type="text/javascript"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/fileinput.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/locales/LANG.js"></script>

2.必要的javascript代码

// 初始化
$("#input-id").fileinput();

// 插件选项
$("#input-id").fileinput({'showUpload':false, 'previewFileType':'any'});

3.html代码

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

4.Ajax上传–两种上传方式（异步上传和同步上传）
您需要设置服务器方法来解析并通过AJAX返回正确的响应。您可以使用异步或同步模式设置上传

异步上传（默认模式）

  将 uploadAsync属性设置为true    
  设置maxFileCount属性来控制一次允许上传的最大文件数量

接收数据（on server）

  1.文件数据：在PHP中，您可以读取这些数据$_FILES['input-name']，input-name是input的name属性。如果您没有为您的输入设置名称属性，则名称默认为file_data，接收则用$_FILES['file_data']。

    （注意，多个文件上传，则要求将multiple设置为true）

  2.额外的数据：通过设置uploadExtraData键值对中的关联数组对象来完成。如果你有设置uploadExtraData={id:'kv-1'}，在PHP中你可以读取这些数据$_POST['id']。

发送数据（from server）
uploadUrl必须以json编码的对象的形式发回数据，在这种情况下，您可以发送这4个信息：

error
-字符串，这将是整个批量上传的错误消息，并将帮助插件识别文件上传中的错误，来自服务器的响应将被发送为{error: 'You are not allowed to upload such a file.'}。插件会自动验证并显示ajax异常错误
initialPreview
-数组，图像文件列表或任何HTML标记指向您上传的文件您将始终在此阵列中发送一行 - 因为您将始终收到一个文件，并以异步模式进行上载。如果设置了该属性，则上传成功后插件会自动替换预览内容中的文件

 initialPreview: [
        '<img src='/images/desert.jpg' class='file-preview-image' alt='Desert' title='Desert'>',
    ],

initialPreviewConfig
-数组，用于标识initialPreview项目中每个文件标记属性的配置（设置为项目的一部分initialPreview）。您将始终在此阵列中发送一行 - 因为您将始终收到一个文件，并以异步模式进行上载。如果设置了该属性，则上传成功后插件会自动替换预览内容中的文件

initialPreviewConfig: [
    {
        caption: 'desert.jpg', 
        width: '120px', 
        url: 'http://localhost/avatar/delete', // server delete action 
        key: 100, 
        extra: {id: 100}
    }
]

initialPreviewThumbTags
-数组，对应于替换每个初始预览缩略图内的标签的对象数组。通过设置的初始预览缩略图initialPreview将读取此配置以替换标签

// change thumbnail footer template
// set initial preview template tags
initialPreviewThumbTags:[
    {
        '{CUSTOM_TAG_NEW}': ' ',
        '{CUSTOM_TAG_INIT}': '<span class=\'custom-css\'>CUSTOM MARKUP</span>'
    }
];

append
-布尔值，如果已经在INIT上设置了initialPreview，是否将内容附加到initialPreview。如果没有设置这个默认值true。如果设置为false，该插件将覆盖initialPreview的内容

重要：1.您必须从服务器发送有效的JSON响应，否则上传过程将失败。即使您没有遇到任何错误，您也必须至少{}从您的服务器发送一个空的JSON对象。
2.要捕获并显示验证错误，您的JSON响应数据必须包含error密钥，其值将是要显示的错误HTML标记。这将如上所述设置。
3.您还可以使用JSON响应发送其他密钥或数据，以便使用类似事件处理高级案例fileuploaded

同步上传

uploadAsync属性设置为false
这将只触发一个批量上传到服务器的调用，并将数据从客户端发送到服务器作为数组对象。
您也可以通过设置maxFileCount属性来控制一次允许上载的最大文件数量。在同步模式下，进展只能在整体水平上进行

接收数据（on server）
设置uploadUrl

file data
-例如在PHP中，您可以读取这些数据\$_FILES['input-name']其中input-name是输入的name属性。如果您没有为您的输入设置名称属性，名称默认为file_data。除了将multiple属性设置为true。如果您不将输入名称设置为数组格式，则只会收到服务器上的第一个文件。在PHP中，您将收到文件数据\$_FILES['input-name']，它将是一个文件对象数组

<form enctype="multipart/form-data" action="file-upload.php" method="POST">
<input name="uploadFile[]" type="file" class="file" multiple="multiple">
</form>

extra data
-插件可以发送额外的数据到你的服务器方法。这可以通过设置uploadExtraData键值对中的关联数组对象来完成。所以如果你有设置uploadExtraData={id:'kv-1'}，在PHP中你可以读取这些数据\$_POST['id']。

发送数据
在同步模式下，uploadUrl必须将数据作为json编码对象发回。在这种情况下，你发送这5条信息：

error
-字符串，这将是整个批量上传的错误消息，并将帮助插件识别文件上传中的错误
errorkeys
-数组，对于已经出错的文件的密钥（接收到的文件数据的从零开始的索引）。根据这些数据，插件会自动设置缩略图和每个单独的预览文件出错
initialPreview
-数组，图像文件列表或任何HTML标记指向您上传的文件。如果设置了该属性，则上传成功后插件会自动替换预览内容中的文件。这个配置与{$ link1}类似。

initialPreview: [
    '<img src='/images/desert.jpg' class='file-preview-image' alt='Desert' title='Desert'>',

    '<img src='/images/jellyfish.jpg' class='file-preview-image' alt='Jelly Fish' title='Jelly Fish'>',

]

initialPreviewConfig
-数组，用于标识initialPreview项目中每个文件标记属性的配置（设置为项目的一部分initialPreview）。如果设置了该属性，则上传成功后插件会自动替换预览内容中的文件。

initialPreviewConfig: [
    {
        caption: 'desert.jpg', 
        width: '120px', 
        url: 'http://localhost/avatar/delete', // server delete action 
        key: 100, 
        extra: {id: 100}
    },
    {
        caption: 'jellyfish.jpg', 
        width: '120px', 
        url: 'http://localhost/avatar/delete', // server delete action 
        key: 101, 
        extra: function() { 
            return {id: $('#id').val()};
        },
    }
]

initialPreviewThumbTags
-数组，对应于替换每个初始预览缩略图内的标签的对象数组。通过设置的初始预览缩略图initialPreview将读取此配置以替换标签

// change thumbnail footer template
// set initial preview template tags
initialPreviewThumbTags:[
    {
        '{CUSTOM_TAG_NEW}': ' ',
        '{CUSTOM_TAG_INIT}': '<span class=\'custom-css\'>CUSTOM MARKUP 1</span>'
    },
    {
        '{CUSTOM_TAG_NEW}': ' ',
        '{CUSTOM_TAG_INIT}': '<span class=\'custom-css\'>CUSTOM MARKUP 2</span>'
    }
];

append
-布尔值，如果已经在INIT上设置了initialPreview，是否将内容附加到initialPreview。如果没有设置这个默认值true。如果设置为false，该插件将覆盖initialPreview的内容。

初始化设置

$("#uploadfile").fileinput({
                language: 'zh', //设置语言
                uploadUrl:"http://127.0.0.1/testDemo/fileupload/upload.do", //上传的地址
               allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
               //uploadExtraData:{"id": 1, "fileName":'123.mp3'},
                uploadAsync: true, //默认异步上传
                showUpload:true, //是否显示上传按钮
                showRemove :true, //显示移除按钮
                showPreview :true, //是否显示预览
                showCaption:false,//是否显示标题
                browseClass:"btn btn-primary", //按钮样式    
               dropZoneEnabled: false,//是否显示拖拽区域
               //minImageWidth: 50, //图片的最小宽度
               //minImageHeight: 50,//图片的最小高度
               //maxImageWidth: 1000,//图片的最大宽度
               //maxImageHeight: 1000,//图片的最大高度
                //maxFileSize:0,//单位为kb，如果为0表示不限制文件大小
               //minFileCount: 0,
                maxFileCount:10, //表示允许同时上传的最大文件个数
                enctype:'multipart/form-data',
               validateInitialCount:true,
                previewFileIcon: "<iclass='glyphicon glyphicon-king'></i>",
               msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
           }).on("fileuploaded", function (event, data, previewId, index){

});

options（转）

属性名	属性类型	描述说明	默认值
language	String	多语言设置，使用时需提前引入\locales文件夹下对应的语言文件，中文zh，引入语言文件必须放在fileinput.js之后	‘en’
showCaption	Boolean	是否显示被选文件的简介	true
showBrowse	Boolean	是否显示浏览按钮	true