Question

我想制作一个允许我附加文件的按钮，但我发现的是我用输入做的：

<input type="file></input>"

但是我想用一个使用jQuery bootstrap的按钮来实现它，它允许我在按钮上放置任何消息，例如：

<button btn btn-primary> Attached to me </button>

反过来根据选择的按钮来按下和改变它的效果，如下所示：

Effect button pushed

Answer 1

这可能很接近：

＆＃13;

if (window.FileReader) {
  $('#inputImage').change(function () {
    var fileReader = new FileReader(),
        files = this.files,
        file;

    if (!files.length) {
      return;
    } else {
    	$('#upload-file').addClass('active');
    }
  });
} else {
  $('#upload-file').removeClass('active');
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>

<label class="btn btn-primary" id="upload-file" title="Upload image file" for="inputImage">
    <input id="inputImage" class="hide" accept="image/*" name="file" type="file">
    Upload new image
</label>

＆＃13;

Answer 2

使用<input type="file"></input>。我认为语法错误真的很烦人。另外，请使用onclick="//function"之类的内容。我不知道css，但你应该在javascript中创建一个函数，例如，使用<button>更改document.getElementById(buttonId).innerHTML值。按照设计进行工作。

Answer 3

HTML：

<input type="file" id="test" style="display:none"/> 
<button id="testbtn" class="button">Attached to me</button>

JQuery的：

$('#testbtn').click(function(){ $('#test').trigger('click'); });

您想要的任何CSS：

.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

希望这会有所帮助。 https://jsfiddle.net/hog0rozg/

如何创建一个附加文件的按钮？

3 个答案: