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

Program / 글쓴이

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

스 니펫 확장