twitter-bootstrap 如何删除 Bootstrap 文件输入中的上传按钮

How to remove upload button in Bootstrap File Input

提问by Makudex

I have this Bootstrap file input plugin which can be found here: http://plugins.krajee.com/file-basic-usage-demo

我有这个 Bootstrap 文件输入插件，可以在这里找到：http: //plugins.krajee.com/file-basic-usage-demo

This plugin looks like as below:

这个插件如下所示：

Now what I want to do is to remove this upload button of this plugin. Does anybody know how to do this? Or does anyone already tried?

现在我想做的是删除这个插件的这个上传按钮。有人知道怎么做这个吗？或者有人已经尝试过吗？

回答by Hanny Setiawan

You can just use these following snippets

你可以只使用以下这些片段

$("#your-input-type-file-ID").fileinput({
    'showUpload': false
});

回答by Makudex

Finally found the answer, by simply editing this code here from fileinput.js:

终于找到了答案，只需从fileinput.js以下位置编辑此代码：

$.fn.fileinput.defaults = {
    language: 'en',
    showCaption: true,
    showPreview: true,
    showRemove: true,
    showUpload: false, // <------ just set this from true to false
    showCancel: true,
    showUploadedThumbs: true,
    // many more below
};

回答by Shakti Singh

You can do it in a simple way also simply write in an attribute data-show-upload="false"and it I'll work too!!

你可以用一种简单的方式来做，也可以简单地写一个属性data-show-upload="false"，我也会工作！！

回答by Waruna Manjula

     <!-- bootstrap 4.x is supported. You can also use the bootstrap css 3.3.x versions -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/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.4.5/css/fileinput-rtl.min.css" media="all" rel="stylesheet" type="text/css" /-->
    <!-- optionally uncomment line below if using a theme or icon set like font awesome (note that default icons used are glyphicons and `fa` theme can override it) -->
    <!-- link https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css media="all" rel="stylesheet" type="text/css" /-->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <!-- piexif.min.js is only needed for 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.4.5/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.4.5/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.4.5/js/plugins/purify.min.js" type="text/javascript"></script>
    <!-- popper.min.js below is needed if you use bootstrap 4.x. You can also use the bootstrap js 
       3.3.x versions without popper.min.js. -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" type="text/javascript"></script>
    <!-- the main fileinput plugin file -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/fileinput.min.js"></script>
    <!-- optionally uncomment line below for loading your theme assets for a theme like Font Awesome (`fa`) -->
    <!-- script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/themes/fa/theme.min.js"></script -->
    <!-- optionally if you need translation for your language then include  locale file as mentioned below -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/locales/LANG.js"></script>   
    
    
    
        <script src="http://goanyone.com/js/fileinput.js" type="text/javascript"></script>



        <div class="file-loading">
        <input id="input-44" type="file" class="file" data-preview-file-type="text">
    </div>
    <script>
    $(document).on('ready', function() {
        $("#input-44").fileinput({
            uploadUrl: 'file-upload-batch',
            maxFilePreviewSize: 10240
        });


    });
    </script>
    <div id="errorBlock" class="help-block"></div>

回答by farhadfery

echo FileInput::widget([
    'name' => 'attachment_50',
    'pluginOptions' => [
        'showPreview' => false,
        'showCaption' => true,
        'showRemove' => true,
        'showUpload' => false
    ]
]);