bootstrap fileinput.js实现国际化及初始化重要参数

fileinput控件初始化时,language属性有两种值:zh和en,可以根据 前台获取的当前系统i18nLanguage的值,来设定language的值,

同时, showPreview :true, // 是否显示预览
dropZoneEnabled: true,// 是否显示拖拽区域
这两个联合起来,可以实现拖拽功能

   i18nLanguage = xxxxx;
             
    var lan = 'zh'
    if(i18nLanguage=='en'){
        lan = 'en'
    }

    var options = {
        theme: "explorer", // 主题
        allowFileExtensions:['.xls','.xlsx'],
        uploadUrl:'#',
        // zh  en
        language: lan, 
        maxFileSize:10*1024,
        overwriteInitial: true,
        uploadAsync: true, // 默认异步上传
        showUpload:true, // 是否显示上传按钮
        showRemove :true, // 显示移除按钮
        showCaption:true,// 是否显示标题 

        showPreview :true, // 是否显示预览             
        dropZoneEnabled: true,// 是否显示拖拽区域
        autoReplace: true // 超过1个文件后,则替换
    }
  • 9
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用 fileinput 插件提供的 `filedeleted` 事件来实现删除文件成功后触发函数的功能。具体步骤如下: 1. 首先,在 HTML 文件中引入 fileinput 插件的 CSS 和 JS 文件,以及 jQuery 库文件。 ```html <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/css/fileinput.min.css" integrity="sha512-od4s1xKwGJ3Q0I0/sBpY0v+e9BdWqUzF6v7HnMjZ0z5ug9zB0qj7hZ5vq+ZnT2F8J2xkY5L6HEM8/5YSyZxS6Q==" crossorigin="anonymous" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-7sP1Ic7y+qzZaD9TzYBmgf7SKZrLoJ6kKQ6v5UPvXtMfhgD/ABeb5h1fSZ+YpQyJgMfjfP2oSUkK6Sg8AcKQFw==" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/js/plugins/piexif.min.js" integrity="sha512-4T0JlW/ewP4I8DzEKR6rDf5BjA1g/9L+e/UWAkRd+6D/aC9WAVg2xUoknI5Z/KuFUvE90UqiJyZ0QXJi8j/7qg==" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/js/plugins/sortable.min.js" integrity="sha512-8R+jWPdN0wKz1v6o3PQ7Gj8fWZLgX6r8RP3a45yUdE1Tl9A2jWJhIPOO8m9p9tSvXj2WvJ9zeWPA3zS2KXU8BQ==" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/js/plugins/purify.min.js" integrity="sha512-Xt0yf7JiZzK9jD5Wj1iJLXNQWpQm1Z6jZv4Fwqy0r0wqMAiQZCfWYs8iY0cX4BQJZUp+0lXs3d2x2W/4IyvR7w==" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/js/fileinput.min.js" integrity="sha512-u3vzW5T3HJr6b2M+0Z1h1iZzBKv6lZlEw2YvUOJUzj2UQJGxvNcS3VZn8eA5D6JnyFgwz1x9aG6Qz7w8QY4Gvw==" crossorigin="anonymous"></script> ``` 2. 接着,在 JS 文件中初始化 fileinput 插件,并绑定 `filedeleted` 事件。 ```javascript $('#my-fileinput').fileinput({ // 配置参数 }); $('#my-fileinput').on('filedeleted', function(event, key) { // 删除文件成功后触发的函数 }); ``` 其中,`#my-fileinput` 是你的 fileinput 元素的 ID,`filedeleted` 事件将在删除文件成功后触发,`key` 参数表示被删除文件的索引。你可以在函数中使用 `console.log()` 来输出一些信息,也可以调用其他函数来处理删除文件成功后的操作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值