Question

如下图所示，我在标准html表单文件上传按钮下面有引导程序。如何删除标准按钮和文本。所以它只是引导按钮和我自己的文本？

文字是丹麦语，但它是“没有选择文件”

我使用ModelForm来显示表单字段。

HTML：

<label class="btn btn-primary btn-file">
    {{ field }}
</label>

的ModelForm：

widgets = {
    'image': forms.FileInput(attrs={'class' : 'add-image-upload-hidden'}),
}

Answer 1

Posible duplicate question

Use Bootstrap FileStyle:

<script type="text/javascript" src="js/bootstrap-filestyle.min.js"> </script>

更改按钮文字。类型：字符串，默认值：“选择文件”

通过JavaScript：

$(":file").filestyle({buttonText: "Find file"});

通过数据属性：

<input type="file" class="filestyle" data-buttonText="Find file">

Answer 2

您必须使用另一个按钮元素来包装您的btn文件并在其中添加您的按钮文本。

我认为这是您想要实现的目标

＆＃13;

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
       
       </head>
       <body>
       
  <label class="btn btn-primary ">
  <button class="btn btn-file">my own text</button>
    your label
</label>
</body>
</html>

＆＃13;

希望这有帮助！

Bootstrap fileupload按钮堆叠在默认的html表单按钮下面

2 个答案: