Bootstrap File Input introduce

蔚落 2022-06-13 05:36 202阅读 0赞

official website：  
[http://plugins.krajee.com/file-input][http_plugins.krajee.com_file-input]

quote file:  
css:

<link href="statics/css/bootstrap.min.css" rel="stylesheet">
                    <link href="statics/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />

js：

<script src="statics/js/jquery-2.1.4.min.js"></script>
                 <script src="statics/js/bootstrap.min.js"></script>
                 <script src="statics/js/fileinput.js" type="text/javascript"></script>

usage：  
HTML:

<div class="modal fade" id="updateImgModal" tabindex="-1" role="dialog"
             aria-labelledby="updateImgModalLabel" aria-hidden="true" style="overflow: scroll">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times" style="color: red;"></i></button>
                        <h4 class="modal-title" id="updateImgModalLabel" onclick="addImgUpdate();">上传母板</h4>
                    </div>
                    <div class="modal-body">
                        <div class="panel panel-info">
                            <div class="panel-heading">
                                母板信息
                            </div>
                            <div class="panel-body">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">请选择母板：</label>
                                        <div class="col-sm-9">
                                            <input id="file_upload" name="file" type="file"  multiple  class="file-loading"   >
                                        </div>
                                    </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i>关闭</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

JS relation option:

function addImgUpdate() { 
    
               //绑定回调方法fileuploaded见文档,返回的json数据里好像要有success这个方法才能被调用。
               $("#file_upload").on('fileuploaded', function(event, data, previewId, index) { 
                   //data格式见文档，可以接收后台map 转json后的值 
                   response = data.response;
                   //业务相关方法，可以忽略
                   $("#cmpath").val(response.msg);
                   $("#updateImgModal").modal('hide');
               });
    
               $("#file_upload").fileinput({
                   language: "zh",
                   //接收文件类型，这里为excel,可以有多个
                   previewFileType:   ["xls"，"自己需要的类型"],
                   //允许可见文件扩展名
                   allowedFileExtensions: ["xls"],
    // elPreviewImage:false,
                    //允许最大数量
                   maxFileCount: 1,
                   //不为空
                   required:true,
                //上传地址 uploadUrl:"mvc/safeCheck/c_m_upload/"+"?"+Math.random()+".json",
                   //开启异步
                   uploadAsync: true,
                   //必需
                   enctype: 'multipart/form-data',
                   browseClass: "btn btn-success",
                   browseLabel: "选择excel母板",
                   browseIcon: "<i class=\"glyphicon glyphicon-picture\"></i> ",
                   removeClass: "btn btn-danger",
                   removeLabel: "删除",
                   removeIcon: "<i class=\"glyphicon glyphicon-trash\"></i> ",
                   uploadClass: "btn btn-info",
                   uploadLabel: "点击上传",
                   uploadIcon: "<i class=\"glyphicon glyphicon-upload\"></i> ",
               });
    ;
    
               $("#updateImgModal").modal('show');
           }

Results show：  
![这里写图片描述][SouthEast]

![这里写图片描述][SouthEast 1]

本文只是从实际项目入手讲解，不够系统全面，如想更好使用建议参考官方文档。

[http_plugins.krajee.com_file-input]: http://plugins.krajee.com/file-input
[SouthEast]: /images/20220613/f7c7651cabe240bfb77652f6e767f94c.png
[SouthEast 1]: /images/20220613/efb796cd39c54ffcbe702298d8260d97.png

发表评论取消回复

表情：

评论列表（有 0 条评论，202人围观）

还没有评论，来说两句吧...

相关阅读

相关 input file 样式美化

input file 样式美化 [点击查看文件上传美化][Link 1][https://www.buruyouni.com/static/demo/%E6%96%87%E4

冷不防/ 2023年07月12日 14:25/ 0 赞/ 32 阅读

相关美化 file input 框

1. 浏览器端显示 ![SouthEast][] 2. 示例下载（免积分） [美化file input.zip][file input.zi

雨点打透心脏的1/2处/ 2022年08月10日 17:34/ 0 赞/ 229 阅读

相关 Bootstrap File Input introduce

official website： [http://plugins.krajee.com/file-input][http_plugins.krajee.com_file-

蔚落/ 2022年06月13日 05:36/ 0 赞/ 203 阅读

相关使用bootstrap默认样式，修改input=file的展现样式

随笔记录一下！使用bootstrap默认的类form-control，使用input=file的时候，展现格式很不友好。我们可以使用三个input来自己拼成一个文件上传

Myth丶恋晨/ 2022年05月29日 09:46/ 0 赞/ 614 阅读

相关 file类型的input

1、清空file类型的input选中的文件： var obj = document.getElementById("detailContentImage") ; obj.o

灰太狼/ 2022年05月15日 12:29/ 0 赞/ 216 阅读

相关 input[type="file"]样式修改

默认情况下，html中的<input type="file"/>标签展示的效果是自带的，为了美观和体验，我们需要对他进行一番修饰，让他看起来，更加的优雅。修饰的思路是，让一个按

青旅半醒/ 2022年03月21日 04:52/ 0 赞/ 458 阅读

相关 bootstrap-file-input简易教程及参数列表文档URL

[https://www.cnblogs.com/parker-yu/p/7207071.html][https_www.cnblogs.com_parker-yu_p_720

柔光的暖阳◎/ 2022年02月18日 08:59/ 0 赞/ 361 阅读

相关 input file multiple获取文件名

input file multiple获取文件名（以分号分隔） <!DOCTYPE html> <html> <head> <meta

拼搏现实的明天。/ 2021年09月28日 06:06/ 0 赞/ 533 阅读

相关 Bootstrap File Input，最好用的文件上传组件

本篇介绍如何使用 Bootstrap File Input（最好用的文件上传组件）来进行图片的展示、上传，以及如何在服务器端进行文件保存。一、先来看效果图吧 ![这里

一时失言乱红尘/ 2021年09月10日 15:12/ 0 赞/ 404 阅读

相关 HTML input file 文件域

HTML input file 文件域 `<input>` 标签 type 属性值设置为 file 即可创建一个文件域。使用文件域时，form 的 enctype 属性...

小灰灰/ 2020年05月16日 18:01/ 0 赞/ 850 阅读