美文网首页Django开发随笔
bootstrap的input file标签太丑了

bootstrap的input file标签太丑了

作者: 天才一般的幼稚 | 来源:发表于2019-01-26 13:44 被阅读0次

    问题描述:想做一个上传文件的功能,但是用了html5的<input type="file">发现不是很美观。而bootstrap本身没有找到一些美观的样式。于是找到了一个小插件,还算比较符合直男的审美。


    解决方案:小插件的名字叫做bootstrap-fileinput(https://github.com/kartik-v/bootstrap-fileinput/)
    使用方法:
    1、下载相应的zip或者tar包解压到相应的目录。
    2、在<head>引用相应的文件。官网给的例子如下,改成本地路径即可(当然也可自定义选择):

    <!-- bootstrap 4.x is supported. You can also use the bootstrap css 3.3.x versions -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" crossorigin="anonymous">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.5.1/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
    <!-- if using RTL (Right-To-Left) orientation, load the RTL CSS file after fileinput.css by uncommenting below -->
    <!-- link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.5.1/css/fileinput-rtl.min.css" media="all" rel="stylesheet" type="text/css" /-->
    <!-- the font awesome icon library if using with `fas` theme (or Bootstrap 4.x). Note that default icons used in the plugin are glyphicons that are bundled only with Bootstrap 3.x. -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
    <!-- piexif.min.js is needed for auto orienting image files OR when restoring exif data in resized images and when you
        wish to resize images before upload. This must be loaded before fileinput.min.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.5.1/js/plugins/piexif.min.js" type="text/javascript"></script>
    <!-- sortable.min.js is only needed if you wish to sort / rearrange files in initial preview. 
        This must be loaded before fileinput.min.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.5.1/js/plugins/sortable.min.js" type="text/javascript"></script>
    <!-- purify.min.js is only needed if you wish to purify HTML content in your preview for 
        HTML files. This must be loaded before fileinput.min.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.5.1/js/plugins/purify.min.js" type="text/javascript"></script>
    <!-- bootstrap.min.js below is needed if you wish to zoom and preview file content in a detail modal
        dialog. bootstrap 4.x is supported. You can also use the bootstrap js 3.3.x versions. -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
    <!-- the main fileinput plugin file -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.5.1/js/fileinput.min.js"></script>
    <!-- following theme script is needed to use the Font Awesome 5.x theme (`fas`) -->
    < script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.5.1/themes/fas/theme.min.js"></script -->
    <!-- optionally if you need translation for your language then include the locale file as mentioned below (replace LANG.js with your language locale) -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.5.1/js/locales/LANG.js"></script>
    

    3、写一段js,主要作用就是初始化fileinput插件。这里的#input-id就是相应<input>标签的id

    // initialize with defaults
    $("#input-id").fileinput();
     
    // with plugin options
    $("#input-id").fileinput({'showUpload':false, 'previewFileType':'any'});
    

    4、<input>标签

    <input id="input-id" type="file" class="file" data-preview-file-type="text">
    

    5、效果


    小demo,可以自动预览

    参考文献:
    GitHub - kartik-v/bootstrap-fileinput: An enhanced HTML 5 file input for Bootstrap 3.x with file preview, multiple selection, and more features.
    Bootstrap File Input - © Kartik
    关于bootstrap对控件input type ="file"的美化 - Red's blog - CSDN博客

    相关文章

      网友评论

        本文标题:bootstrap的input file标签太丑了

        本文链接:https://www.haomeiwen.com/subject/qblijqtx.html