为什么没有一个花哨的文件元素上传按钮推特引导?如果为上传按钮实现蓝色的主按钮，那就太好了。它甚至有可能巧妙的上传按钮使用CSS?(看起来像一个无法操纵的本机浏览器元素)
当前回答
我也有同样的问题，我是这样尝试的。
<div>
<button type='button' class='btn btn-info btn-file'>Browse</button>
<input type='file' name='image'/>
</div>
CSS
<style>
.btn-file {
position:absolute;
}
</style>
JS的
<script>
$(document).ready(function(){
$('.btn-file').click(function(){
$('input[name="image"]').click();
});
});
</script>
注意: 按钮.btn-file必须在与输入文件相同的标签中
希望你找到了最好的解决方案…
其他回答
使用其他答案的部分简化答案，主要是user2309766和dotcomsuperstar。
特点:
为按钮和字段使用引导按钮插件。 只有一个输入;表单将接收多个输入。 除了"display: none;"，没有额外的css来隐藏文件输入。 可见按钮触发隐藏文件输入的单击事件。 分割删除文件路径使用正则表达式和分隔符'\'和'/'。
代码:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="input-group"> <span class="input-group-btn"> <span class="btn btn-primary" onclick="$(this).parent().find('input[type=file]').click();">Browse</span> <input name="uploaded_file" onchange="$(this).parent().parent().find('.form-control').html($(this).val().split(/[\\|/]/).pop());" style="display: none;" type="file"> </span> <span class="form-control"></span> </div>
我也有同样的问题，我是这样尝试的。
<div>
<button type='button' class='btn btn-info btn-file'>Browse</button>
<input type='file' name='image'/>
</div>
CSS
<style>
.btn-file {
position:absolute;
}
</style>
JS的
<script>
$(document).ready(function(){
$('.btn-file').click(function(){
$('input[name="image"]').click();
});
});
</script>
注意: 按钮.btn-file必须在与输入文件相同的标签中
希望你找到了最好的解决方案…
这是珍妮的自举叉里的。
可以使用。创建简单的上传按钮
<span class="btn btn-file">Upload<input type="file" /></span>
使用fileupload插件，您可以创建更高级的小部件。看一看 http://jasny.github.io/bootstrap/javascript/#fileinput
不需要花哨的东西:
HTML:
<form method="post" action="/api/admin/image" enctype="multipart/form-data">
<input type="hidden" name="url" value="<%= boxes[i].url %>" />
<input class="image-file-chosen" type="text" />
<br />
<input class="btn image-file-button" value="Choose Image" />
<input class="image-file hide" type="file" name="image"/> <!-- Hidden -->
<br />
<br />
<input class="btn" type="submit" name="image" value="Upload" />
<br />
</form>
JS:
$('.image-file-button').each(function() {
$(this).off('click').on('click', function() {
$(this).siblings('.image-file').trigger('click');
});
});
$('.image-file').each(function() {
$(this).change(function () {
$(this).siblings('.image-file-chosen').val(this.files[0].name);
});
});
注意:所讨论的三个表单元素必须是彼此的兄弟元素(。Image-file-chosen， .image-file-button， .image-file)
这是我喜欢的最好的文件上传风格:
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="input-append">
<div class="uneditable-input span3"><i class="icon-file fileupload-exists"></i> <span class="fileupload-preview"></span></div><span class="btn btn-file"><span class="fileupload-new">Select file</span><span class="fileupload-exists">Change</span><input type="file" /></span><a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
</div>
</div>
你可以得到演示和更多的风格:
http://www.jasny.net/bootstrap/javascript/#fileinput
但是使用这个，你应该用jasny bootstrap文件替换twitter bootstrap ..
的问候。
