为什么没有一个花哨的文件元素上传按钮推特引导?如果为上传按钮实现蓝色的主按钮，那就太好了。它甚至有可能巧妙的上传按钮使用CSS?(看起来像一个无法操纵的本机浏览器元素)
当前回答
不需要额外的插件，这个bootstrap解决方案非常适合我:
<div style="position:relative;">
<a class='btn btn-primary' href='javascript:;'>
Choose File...
<input type="file" style='position:absolute;z-index:2;top:0;left:0;filter: alpha(opacity=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0;background-color:transparent;color:transparent;' name="file_source" size="40" onchange='$("#upload-file-info").html($(this).val());'>
</a>
<span class='label label-info' id="upload-file-info"></span>
</div>
演示:
http://jsfiddle.net/haisumbhatti/cAXFA/1/ (bootstrap 2)
http://jsfiddle.net/haisumbhatti/y3xyU/ (bootstrap 3)
其他回答
我使用http://gregpike.net/demos/bootstrap-file-input/demo.html:
$('input[type=file]').bootstrapFileInput();
or
$('.file-inputs').bootstrapFileInput();
我想我要加上我的三便士价值，只是说一下如何默认的.custom-file-label和custom-file-input BS4文件输入以及如何使用它们。
后一个类在输入组上，是不可见的。而前者是可见标签，并且有一个:后伪元素，看起来像一个按钮。
<div class="custom-file">
<input type="file" class="custom-file-input" id="upload">
<label class="custom-file-label" for="upload">Choose file</label>
</div>
你不能向伪元素中添加类，但是你可以用CSS(或SASS)来设置它们的样式。
.custom-file-label:after {
color: #fff;
background-color: #1e7e34;
border-color: #1c7430;
pointer: cursor;
}
不需要额外的插件，这个bootstrap解决方案非常适合我:
<div style="position:relative;">
<a class='btn btn-primary' href='javascript:;'>
Choose File...
<input type="file" style='position:absolute;z-index:2;top:0;left:0;filter: alpha(opacity=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0;background-color:transparent;color:transparent;' name="file_source" size="40" onchange='$("#upload-file-info").html($(this).val());'>
</a>
<span class='label label-info' id="upload-file-info"></span>
</div>
演示:
http://jsfiddle.net/haisumbhatti/cAXFA/1/ (bootstrap 2)
http://jsfiddle.net/haisumbhatti/y3xyU/ (bootstrap 3)
我已经创建了一个自定义上传按钮，只接受图像，这可以根据您的要求修改。
希望这能有所帮助!!：）
(已使用的Bootstrap框架)
代码笔链接
HTML
<center>
<br />
<br />
<span class="head">Upload Button Re-Imagined</span>
<br />
<br />
<div class="fileUpload blue-btn btn width100">
<span>Upload your Organizations logo</span>
<input type="file" class="uploadlogo" />
</div>
</center>
CSS
.head {
font-size: 25px;
font-weight: 200;
}
.blue-btn:hover,
.blue-btn:active,
.blue-btn:focus,
.blue-btn {
background: transparent;
border: solid 1px #27a9e0;
border-radius: 3px;
color: #27a9e0;
font-size: 16px;
margin-bottom: 20px;
outline: none !important;
padding: 10px 20px;
}
.fileUpload {
position: relative;
overflow: hidden;
height: 43px;
margin-top: 0;
}
.fileUpload input.uploadlogo {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
width: 100%;
height: 42px;
}
/*Chrome fix*/
input::-webkit-file-upload-button {
cursor: pointer !important;
}
JS
// You can modify the upload files to pdf's, docs etc
//Currently it will upload only images
$(document).ready(function($) {
// Upload btn
$(".uploadlogo").change(function() {
readURL(this);
});
function readURL(input) {
var url = input.value;
var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
if (input.files && input.files[0] && (ext == "png" || ext == "jpeg" || ext == "jpg" || ext == "gif" || ext == "svg")) {
var path = $('.uploadlogo').val();
var filename = path.replace(/^.*\\/, "");
$('.fileUpload span').html('Uploaded logo : ' + filename);
// console.log(filename);
} else {
$(".uploadlogo").val("");
$('.fileUpload span').html('Only Images Are Allowed!');
}
}
});
http://markusslima.github.io/bootstrap-filestyle/
$(":file").filestyle();
OR
<input type="file" class="filestyle" data-input="false">
