4

JasnyフォークでBootstrapを使用しています。ユーザーが画像をアップロードできるフォームに取り組んでいます。ユーザーが実際に画像を選択するまで、フォームの送信ボタンを非表示にしたい。理想的には、ユーザーがフォームからファイルを削除すると、送信ボタンも消えるはずです。このフォークを実際に使ったのはこれが初めてです。どうすればいいですか？

<div class="fileupload fileupload-new" data-provides="fileupload">
  <div class="fileupload-new thumbnail" style="width: 114px; height: 64px;"><img src="http://www.placehold.it/114x64/EFEFEF/AAAAAA" /></div>
  <div class="fileupload-preview fileupload-exists thumbnail" style="width: 114px; height: 64px;"></div>
  <span class="btn btn-file"><span class="fileupload-new">Select image</span><span class="fileupload-exists">Change</span><input type="file" /></span>
  <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
  <button type="submit" class="btn btn-primary">Upload</button>
</div>
4

4 に答える 4

5

入力フィールドにイベントリスナーを追加し、変更イベントをリッスンする必要があります。次に、イベントターゲットがユーザーによって選択されたファイルであるかどうかを確認する必要があります。入力フィールドにIDを追加するようにコードを変更し、アップロードボタンでhttp://jsfiddle.net/LLfjE/で確認しました。

$('#file-input').on('change', function(evt) {
    var file = evt.target.files[0];
    if (file){
        $('#upload-btn').show();
    } else {
        $('#upload-btn').hide();
    }
});​
于 2012-12-06T00:07:22.320 に答える
5

選択した回答は機能しますが、Jasnyの組み込みイベントを次のように使用することもできます'change.bs.fileinput'。

$('.fileupload').on('change.bs.fileinput', function() {
   $(this).find('.btn').show();
});
于 2013-12-08T16:25:34.377 に答える
2

送信ボタンで組み込みのクラス「fileupload-exists」を使用するだけです。これにより、ファイルが選択されるまでボタンが非表示になります。

<div class="fileupload fileupload-new" 
    data-provides="fileupload" 
    data-uploadtype="file">

<button type="submit" class="btn fileupload-exists">
<i class="icon-arrow-up"></i> Upload File</button>
于 2013-04-16T15:10:37.380 に答える
1

送信ボタンクラスに「fileupload-exists」を追加するだけです。

于 2013-08-29T12:44:23.400 に答える