boostrap-fileinput上传插件

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(转)

属性名属性类型描述说明默认值
languageString多语言设置,使用时需提前引入\locales文件夹下对应的语言文件,中文zh,引入语言文件必须放在fileinput.js之后‘en’
showCaptionBoolean是否显示被选文件的简介true
showBrowseBoolean是否显示浏览按钮true
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值