트위터 부트 스트랩에 멋진 파일 요소 업로드 버튼이없는 이유는 무엇입니까? 업로드 버튼에 파란색 기본 버튼이 구현되어 있으면 좋을 것입니다. CSS를 사용하여 업로드 버튼을 세밀하게 만들 수도 있습니까? (조작 할 수없는 기본 브라우저 요소 인 것 같습니다)
답변
다음은 부트 스트랩 3 및 4에 대한 솔루션입니다.
버튼처럼 보이는 기능적인 파일 입력 컨트롤을 만들려면 HTML 만 있으면됩니다.
HTML
<label class="btn btn-default">
Browse <input type="file" hidden>
</label>
이것은 IE9 +를 포함한 모든 최신 브라우저에서 작동합니다. 이전 IE도 지원해야하는 경우 아래 표시된 기존 방법을 사용하십시오.
이 기술은 HTML5 hidden
속성 에 의존 합니다. Bootstrap 4는 다음 CSS를 사용하여 지원되지 않는 브라우저에서이 기능을 shim합니다. 부트 스트랩 3을 사용하는 경우 추가해야 할 수도 있습니다.
[hidden] {
display: none !important;
}
기존 IE의 레거시 접근 방식
IE8 이하를 지원해야하는 경우 다음 HTML / CSS를 사용하십시오.
HTML
<span class="btn btn-default btn-file">
Browse <input type="file">
</span>
CSS
.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: white;
cursor: inherit;
display: block;
}
이전 IE는 a를 클릭 할 때 파일 입력을 트리거하지 않으므로 <label>
CSS “bloat”은 그 문제를 해결하기 위해 몇 가지 작업을 수행합니다.
- 파일 입력을 주변의 전체 너비 / 높이로 확장합니다
<span>
- 파일 입력을 보이지 않게 만듭니다
피드백 및 추가 자료
이 방법에 대한 자세한 내용과 선택된 파일 수를 표시하는 방법에 대한 예를 게시했습니다.
http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/
답변
나는 그 <label>
요소에 대한 언급이 없다는 것에 놀랐다 .
해결책:
<label class="btn btn-primary" for="my-file-selector">
<input id="my-file-selector" type="file" class="d-none">
Button Text Here
</label>
JS 또는 펑키 CSS가 필요하지 않습니다 …
파일 이름을 포함하는 솔루션 :
<label class="btn btn-primary" for="my-file-selector">
<input id="my-file-selector" type="file" style="display:none"
onchange="$('#upload-file-info').html(this.files[0].name)">
Button Text Here
</label>
<span class='label label-info' id="upload-file-info"></span>
위의 솔루션에는 jQuery가 필요합니다.
답변
추가 플러그인이 필요하지 않은이 부트 스트랩 솔루션은 다음과 같이 작동합니다.
<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/ (부트 스트랩 2)
http://jsfiddle.net/haisumbhatti/y3xyU/ (부트 스트랩 3)
답변
그것은 Jasny의 부트 스트랩 포크에 포함되어 있습니다.
간단한 업로드 버튼을 사용하여 만들 수 있습니다
<span class="btn btn-file">Upload<input type="file" /></span>
fileupload 플러그인을 사용하면 고급 위젯을 만들 수 있습니다. http://jasny.github.io/bootstrap/javascript/#fileinput을 살펴보십시오.
답변
업로드 버튼은 버튼이 아닌 입력의 스타일을 지정하기 때문에 번거로운 스타일입니다.
그러나이 트릭을 사용할 수 있습니다 :
http://www.quirksmode.org/dom/inputfile.html
요약:
-
법선을 취하여로
<input type="file">
요소에 넣습니다position: relative
. -
이 동일한 부모 요소
<input>
에 올바른 스타일을 가진 일반 및 이미지를 추가 하십시오. 이 요소들이와 동일한 위치를 차지하도록 절대 위치를 지정하십시오<input type="file">
. -
<input type="file">
스타일이 지정된 입력 / 이미지 위에 놓 이도록 의 z- 색인 을 2로 설정하십시오 . -
마지막으로의 불투명도
<input type="file">
를 0 으로 설정하십시오 .<input type="file">
이제는 사실상 보이지 않게되고 스타일 입력 / 이미지가 빛나지 만 “찾아보기”버튼을 클릭해도됩니다. 단추가 이미지 위에 있으면 사용자가 이미지를 클릭 한 것으로 나타나고 일반 파일 선택 창이 나타납니다. (실제로는 보이지 않는 요소도 클릭 할 수 없으며 클릭 할 수 있어야하기 때문에 가시성을 사용할 수 없습니다. 숨김)
답변
나를 위해 작동 :
최신 정보
// Based in: http://duckranger.com/2012/06/pretty-file-input-field-in-bootstrap/
// Version: 0.0.3
// Compatibility with: Bootstrap 3.2.0 and jQuery 2.1.1
// Use:
// <input class="nice_file_field" type="file" data-label="Choose Document">
// <script> $(".nice_file_field").niceFileField(); </script>
//
(function( $ ) {
$.fn.niceFileField = function() {
this.each(function(index, file_field) {
file_field = $(file_field);
var label = file_field.attr("data-label") || "Choose File";
file_field.css({"display": "none"});
nice_file_block_text = '<div class="input-group nice_file_block">';
nice_file_block_text += ' <input type="text" class="form-control">';
nice_file_block_text += ' <span class="input-group-btn">';
nice_file_block_text += ' <button class="btn btn-default nice_file_field_button" type="button">' + label + '</button>';
nice_file_block_text += ' </span>';
nice_file_block_text += '</div>';
file_field.after(nice_file_block_text);
var nice_file_field_button = file_field.parent().find(".nice_file_field_button");
var nice_file_block_element = file_field.parent().find(".nice_file_block");
nice_file_field_button.on("click", function(){ console.log("click"); file_field.click() } );
file_field.change( function(){
nice_file_block_element.find("input").val(file_field.val());
});
});
};
})( jQuery );
답변
다른 답변 (주로 user2309766 및 dotcomsuperstar)의 일부를 사용하여 단순화 된 답변.
풍모:
- 버튼 및 필드에 부트 스트랩 버튼 애드온을 사용합니다.
- 하나의 입력 만; 여러 입력은 양식에 의해 선택됩니다.
- “display : none;”이외의 추가 CSS는 없습니다. 파일 입력을 숨길 수 있습니다.
- 표시 버튼은 숨겨진 파일 입력을 위해 클릭 이벤트를 발생시킵니다.
split
파일 경로를 제거하려면 정규식 및 구분 기호 ‘\’및 ‘/’를 사용하십시오.
암호:
<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>