为什么没有一个花哨的文件元素上传按钮推特引导?如果为上传按钮实现蓝色的主按钮,那就太好了。它甚至有可能巧妙的上传按钮使用CSS?(看起来像一个无法操纵的本机浏览器元素)
当前回答
基于绝对聪明的@claviska解决方案,所有的功劳都要归功于他。
全功能的Bootstrap 4文件输入验证和帮助文本。
基于输入组示例,我们有一个用于向用户显示文件名的虚拟输入文本字段,该字段由隐藏在标签按钮后面的实际输入文件字段上的onchange事件填充。除了包含引导验证支持外,我们还可以点击输入中的任何地方来打开文件对话框。
文件输入的三种状态
这三种可能的状态是未验证的、有效的和无效的,需要设置虚拟html输入标记属性。
Html标记作为输入
我们只引入了2个自定义类input-file-dummy和input-file-btn,以正确地设置样式并连接所需的行为。其他的都是标准的Bootstrap 4标记。
<div class="input-group">
<input type="text" class="form-control input-file-dummy" placeholder="Choose file" aria-describedby="fileHelp" required>
<div class="valid-feedback order-last">File is valid</div>
<div class="invalid-feedback order-last">File is required</div>
<label class="input-group-append mb-0">
<span class="btn btn-primary input-file-btn">
Browse… <input type="file" hidden>
</span>
</label>
</div>
<small id="fileHelp" class="form-text text-muted">Choose any file you like</small>
JavaScript行为规定
虚拟输入需要是只读的,就像原来的例子一样,以防止用户更改只能通过打开文件对话框更改的输入。不幸的是,验证不会发生在只读字段上,所以我们切换了焦点和模糊(jquery事件onfocusin和onfocusout)输入的可编辑性,并确保它再次成为可验证的文件被选中。
除了使文本字段可单击之外,通过触发按钮的单击事件,填充虚拟字段的其余功能是由@claviska设想的。
$(function () {
$('.input-file-dummy').each(function () {
$($(this).parent().find('.input-file-btn input')).on('change', {dummy: this}, function(ev) {
$(ev.data.dummy)
.val($(this).val().replace(/\\/g, '/').replace(/.*\//, ''))
.trigger('focusout');
});
$(this).on('focusin', function () {
$(this).attr('readonly', '');
}).on('focusout', function () {
$(this).removeAttr('readonly');
}).on('click', function () {
$(this).parent().find('.input-file-btn').click();
});
});
});
自定义样式调整
最重要的是,我们不希望只读字段在灰色背景和白色之间跳跃,所以我们确保它保持白色。span按钮没有指针光标,但我们需要为输入添加一个指针光标。
.input-file-dummy, .input-file-btn {
cursor: pointer;
}
.input-file-dummy[readonly] {
background-color: white;
}
nJoy !
其他回答
这对我来说非常合适
<span>
<input type="file"
style="visibility:hidden; width: 1px;"
id='${multipartFilePath}' name='${multipartFilePath}'
onchange="$(this).parent().find('span').html($(this).val().replace('C:\\fakepath\\', ''))" /> <!-- Chrome security returns 'C:\fakepath\' -->
<input class="btn btn-primary" type="button" value="Upload File.." onclick="$(this).parent().find('input[type=file]').click();"/> <!-- on button click fire the file click event -->
<span class="badge badge-important" ></span>
</span>
我修改了@claviska的答案,并按照我喜欢的方式工作(Bootstrap 3,4未测试):
<label class="btn btn-default">
<span>Browse</span>
<input type="file" style="display: none;" onchange="$(this).prev('span').text($(this).val()!=''?$(this).val():'Browse')">
</label>
这是珍妮的自举叉里的。
可以使用。创建简单的上传按钮
<span class="btn btn-file">Upload<input type="file" /></span>
使用fileupload插件,您可以创建更高级的小部件。看一看 http://jasny.github.io/bootstrap/javascript/#fileinput
这是另一个技巧,它不是最好的解决方案,但它只是给你一个选择
HTML代码:
<button clss="btn btn-primary" id="btn_upload">Choose File</button>
<input id="fileupload" class="hide" type="file" name="files[]">
Javascript:
$("#btn_upload").click(function(e){
e.preventDefault();
$("#fileupload").trigger('click');
});
有可接受结果的简单解决办法:
<input type="file" class="form-control">
以及风格:
input[type=file].form-control {
height: auto;
}