[css] 트위터 부트 스트랩 양식 파일 요소 업로드 버튼

트위터 부트 스트랩에 멋진 파일 요소 업로드 버튼이없는 이유는 무엇입니까? 업로드 버튼에 파란색 기본 버튼이 구현되어 있으면 좋을 것입니다. 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>
        &nbsp;
        <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

요약:

  1. 법선을 취하여로 <input type="file">요소에 넣습니다 position: relative.

  2. 이 동일한 부모 요소 <input>에 올바른 스타일을 가진 일반 및 이미지를 추가 하십시오. 이 요소들이와 동일한 위치를 차지하도록 절대 위치를 지정하십시오 <input type="file">.

  3. <input type="file">스타일이 지정된 입력 / 이미지 위에 놓 이도록 의 z- 색인 을 2로 설정하십시오 .

  4. 마지막으로의 불투명도 <input type="file">를 0 으로 설정하십시오 . <input type="file">이제는 사실상 보이지 않게되고 스타일 입력 / 이미지가 빛나지 만 “찾아보기”버튼을 클릭해도됩니다. 단추가 이미지 위에 있으면 사용자가 이미지를 클릭 한 것으로 나타나고 일반 파일 선택 창이 나타납니다. (실제로는 보이지 않는 요소도 클릭 할 수 없으며 클릭 할 수 있어야하기 때문에 가시성을 사용할 수 없습니다. 숨김)


답변

나를 위해 작동 :

최신 정보

jQuery 플러그인 스타일 :

// 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>