ボタンを使ってファイルを添付するにはどうすればよいですか？

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を知っていませんが、たとえばを使って<button>の値を変更するjavascriptで関数を作成する必要があります。デザインであなたのやり方を操作してください。

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/