如何製作一個按鈕來附加文件？

Question

我想打一個按鈕，可以讓我附加文件，但我已經發現的是，我與輸入做到這一點：

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

但我想使用jQuery引導的一個按鈕做的是讓我把任何消息上的按鈕，像：

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

而反過來作出這樣選擇了哪個按鈕，它被擠壓和根據變化的影響，一些：

Effect button pushed

Answer 1

使用<input type="file"></input>。我認爲語法錯誤真的讓你煩惱。此外，使用類似onclick="//function"。我不知道css，但你應該在javascript中創建一個函數，例如，使用document.getElementById(buttonId).innerHTML更改<button>的值。按照設計工作。

Answer 2

這可能是一個接近：

if (window.FileReader) { 
 
    $('#inputImage').change(function() { 
 
    var fileReader = new FileReader(), 
 
     files = this.files, 
 
     file; 
 

 
    if (!files.length) { 
 
     return; 
 
    } else { 
 
    \t $('#upload-file').addClass('active'); 
 
    } 
 
    }); 
 
} else { 
 
    $('#upload-file').removeClass('active'); 
 
}

<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>

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/