Skip to content

12. 一些样例代码

Jump to bottom Edit New page
Kai edited this page Apr 26, 2017 · 6 revisions

基本用法

把下面的代码加入你的HTML页面的body中，确保已经加载了插件库（详见用法部分）

  1. 使用file类自动初始化一个文件输入部件。

    <label class="control-label"> 选择文件 </label>
<input type="file" class="file">

  2. 隐藏预览缩略图

    <label class="control-label"> 选择文件 </label>
<input type="file" class="file" data-show-preview="false">

  3. 使用输入标签的input属性（如多文件上传设置multiple）来设置输入行为，并通过data-*属性来设置插件参数。

    样例1：

    <label class="control-label"> 选择文件 </label>
<input name="input[]" type="file" class="file" multiple data-show-upload="false" data-show-caption="true">
<!-- 多文件上传，不显示上传按钮，显示标题 -->

    样例2：

    <label class="control-label">Select File</label>
<input name="input[]" multiple type="file" class="file file-loading" data-allowed-file-extensions='["csv", "txt"]'>
<!-- `file-loading`类的作用是在插件DOM元素加载时显示一个旋转指示器 -->
<!-- 允许输入文件的后缀有`csv`和`txt`，使用HTML标记语言传递JSON参数 -->

  4. 设置文件输入部件为只读或者禁用状态。

    <label class="control-label"> 只读输入框 </label>
    <input type="file" class="file" readonly="true">
    <label class="control-label"> 禁用输入框 </label>
    <input type="file" class="file" disabled="true">

  1. 通过JavaScript初始化输入框部件

    样例1：

    <label class="control-label"> 选择文件 </label>
<input id="input" name="input[]" type="file" multiple class="file-loading">
<!-- `file-loading`类作用是在插件DOM元素加载时显示一个旋转指示器 -->

<script>
    $(document).on('ready', function() {
        $("#input").fileinput({showCaption: false}); //输入框部件只显示选择文件按钮，隐藏标题
    });
</script>

    样例2：

    <label class="control-label"> 选择文件 </label>
<input id="input" name="input[]" type="file" multiple class="file-loading">
<script>
    $(document).on('ready', function() {
        $("#input").fileinput({
            showUpload: false,            //隐藏上传按钮
            maxFileCount: 10,             //输入文件数量最大为10
            mainClass: "input-group-lg"   //文件输入框为大型号
        });
    });
</script>

高级用法

  1. 初始预览

    <label class="control-label"> 行星和卫星 </label>
<input id="input" name="input[]" type="file" multiple class="file-loading">
<script>
    $(document).on('ready', function() {
        $("#input").fileinput({
            initialPreview: [
                'http://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/631px-FullMoon2010.jpg',
                'http://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Earth_Eastern_Hemisphere.jpg/600px-Earth_Eastern_Hemisphere.jpg'
            ],
            initialPreviewAsData: true,
            initialPreviewConfig: [
                {caption: "Moon.jpg", size: 930321, width: "120px", key: 1},
                {caption: "Earth.jpg", size: 1218822, width: "120px", key: 2}
            ],
            deleteUrl: "/site/file-delete",    //删除操作的URL地址
            overwriteInitial: false,           //不允许覆盖初始的预览，所以添加文件时不会覆盖
            maxFileSize: 100,                  //文件最大不超过100KB
            initialCaption: "月球和地球"
        });
    });
</script>

  2. 精简部件

    <label class="control-label"> 选择文件 </label>
<input id="input" type="file" class="file-loading">
<script>
    $(document).on('ready', function() {
        $("#input").fileinput({
            browseClass: "btn btn-primary btn-block",
            showCaption: false,    //不显示标题
            showRemove: false,     //不显示删除按钮
            showUpload: false      //不显示上传按钮
        });    //只显示选择文件的按钮
    });
</script>

  3. 自定义部件按钮

    <label class="control-label">Select File</label>
<input id="input-21" type="file" accept="image/*" class="file-loading">
<!-- 只接受图像文件 -->

<script>
    $(document).on('ready', function() {
        $("#input-21").fileinput({
            previewFileType: "image",
            browseClass: "btn btn-success",
            browseLabel: "Pick Image",
            browseIcon: "<i class=\"glyphicon glyphicon-picture\"></i> ",
            removeClass: "btn btn-danger",
            removeLabel: "Delete",
            removeIcon: "<i class=\"glyphicon glyphicon-trash\"></i> ",
            uploadClass: "btn btn-info",
            uploadLabel: "Upload",
            uploadIcon: "<i class=\"glyphicon glyphicon-upload\"></i> "
        });
    });
</script>

  4. 自定义预览背景

    <label class="control-label">Select File</label>
<input id="input" name="input[]" type="file" class="file-loading" accept="text/plain" multiple>
<script>
    $(document).on('ready', function() {
        $("#input").fileinput({
            previewFileType: "text",   //预览文件类型
            allowedFileExtensions: ["txt", "md", "ini", "text"],  //允许的文件后缀
            previewClass: "bg-warning"    //预览样式CSS类
        });
    });
</script>

  5. 自定义部件模板

    <label class="control-label">Select File</label>
<input id="input-23" name="input23[]" type="file" multiple class="file-loading">
<script>
    $(document).on('ready', function() {
        $("#input-23").fileinput({
            showUpload: false,
            layoutTemplates: {
                main1: "{preview}\n" +
                "<div class=\'input-group {class}\'>\n" +
                "   <div class=\'input-group-btn\'>\n" +
                "       {browse}\n" +
                "       {upload}\n" +
                "       {remove}\n" +
                "   </div>\n" +
                "   {caption}\n" +
                "</div>"
            }    //把默认的模板反向排列按钮
        });
    });
</script>

  6. 动态修改输入框

    <label class="control-label">Select File</label>
<input id="input" name="input40[]" type="file" class="file" multiple>
<br>
<button type="button" class="btn btn-warning btn-modify">Modify</button>
<script>
    //当点击`Modify`按钮时，切换文件输入的禁用状态并改变它的参数
    $(document).on('ready', function() {
        $(".btn-modify").on("click", function() {
            var $btn = $(this);
            if ($btn.text() == "Modify") {
                $("#input").fileinput("disable").fileinput("refresh", {showUpload: false});
                $btn.html("Revert");
                alert("Hurray! I have disabled the input and hidden the upload button.");
            }
            else {
                $("#input").fileinput("enable").fileinput("refresh", {showUpload: true});
                $btn.html("Modify");
                alert("Hurray! I have reverted back the input to enabled with the upload button.");
            }
        });
    });
</script>

  7. 控制上传文件

    <label class="control-label">Select File</label>
<input id="input" name="input[]" type="file" multiple class="file-loading">
<script>
    //上传文件类型为图像或者视频，最大上传数量为10
    $(document).on('ready', function() {
        $("#input").fileinput({
            maxFileCount: 10,
            allowedFileTypes: ["image", "video"]
        });
    });
</script>
    <label class="control-label">Select File</label>
<input id="input" name="input[]" type="file" multiple class="file-loading">
<script>
    $(document).on('ready', function() {
        $("#input").fileinput({
            maxFileCount: 10,
            allowedFileExtensions: ["jpg", "gif", "png", "txt"]
        });
    });
</script>

  8. 自定义错误信息容器

    <label class="control-label">Select File</label>
<input id="input" name="input[]" type="file" multiple class="file-loading">
<div id="errorBlock" class="help-block"></div>
<script>
    $(document).on('ready', function() {
        $("#input").fileinput({
            showPreview: false,
            allowedFileExtensions: ["zip", "rar", "gz", "tgz"],
            elErrorContainer: "#errorBlock"
        });
    });
</script>

  9. 文件大小控制

    <label class="control-label">Select File</label>
<input id="input-44" name="input44[]" type="file" multiple class="file-loading">
<div id="errorBlock" class="help-block"></div>
<script>
    $(document).on('ready', function() {
        $("#input-44").fileinput({
            uploadUrl: '/file-upload-batch/2',    //未设置此属性，输入框为一条形控件；设置后，出现文件拖拽区域。
            maxFilePreviewSize: 10240        //最大文件大小10240KB(10M)，如果不设置，默认大小25M
        });
    });
</script>
Add a custom footer
Add a custom sidebar

Clone this wiki locally