zoukankan      html  css  js  c++  java
  • bootstrap fileinput api翻译笔记

    bootstrap fileinput

    HTML标签属性
    data-show-preview="false" // 是否显示预览区
    multiple // 多文件
    data-show-caption="true" // 显示输入框
    readonly="true"
    disabled="true"
    data-show-remove="false" // remove按钮
    class="file-loading" // 载入特效
    data-allowed-file-extensions='["csv", "txt"]' // 扩展名限定
    data-preview-file-type="text" //
    required // 验证 上传文件不能为空
    accept="image/*" 选择文件时, 右边默认的扩展名(html input-file标签自带)
    详见: http://w3schools.bootcss.com/tags/att_input_accept.html

    js配置项
    $(document).on('ready', function(){
    $('#input').fileinput({
    showCaption: false, // 显示输入框
    showUpload: false, // 显示上传按钮
    maxFileCount: 10, // 文件上传数量(一次允许上传的最大文件量)
    mainClass: "input-group-lg", //输入框样式(height)
    initialPreview: [ //预览图片设置
    '1.jpg',
    '2.jpg'
    ],
    overwriteInitial: true, // 上传图片后预览是否会被刷掉
    previewFileType: "image",
    browseClass: "btn btn-primary btn-block", // 浏览按钮样式
    browseLabel: "Pick Image", // 浏览按钮文字
    browseIcon: "<i class="glyphicon glyphicon-picture"></i> ", // 浏览按钮图标
    removeClass: "btn btn-danger", // 移除按钮CSS样式
    removeLabel: "Delete", // 移除按钮文字
    removeIcon: "<i class="glyphicon glyphicon-trash"></i> ", // 移除按钮图标
    uploadClass: "btn btn-info", // 上传按钮CSS样式
    uploadLabel: "Upload", // 上传按钮文字
    uploadIcon: "<i class="glyphicon glyphicon-upload"></i> ", // 上传按钮图标
    previewClass: "bg-warning",
    hideThumbnailContent: true, // 是否显示预览区的预览图(预览区照常有, 只不过没有预览图片了)--不好用
    });
    });

  • 相关阅读:
    订单号设计
    小公司的技术架构原则
    Redis配置详解
    实现图片懒加载
    Js的GC机制
    防抖与节流
    Js中的堆栈
    浏览器窗口间通信
    块级格式化上下文
    实现瀑布流布局
  • 原文地址:https://www.cnblogs.com/helkbore/p/7411638.html
Copyright © 2011-2022 走看看