입력 type="file"버튼의 스타일을 어떻게 지정합니까 ?

대부분의 브라우저는 CSS 또는 자바 스크립트에서 모양을 변경하지 않기 때문에 파일 입력 스타일링이 어려운 것으로 악명이 높습니다.

입력 크기조차도 다음과 같은 것에 응답하지 않습니다.

<input type="file" style="width:200px">

대신 size 속성을 사용해야합니다.

<input type="file" size="60" />

그보다 세련된 스타일 (예 : 찾아보기 버튼 모양 변경)의 경우 기본 파일 입력 위에 스타일이 지정된 버튼과 입력 상자를 오버레이하는 까다로운 접근 방식을 살펴 봐야합니다. www.quirksmode.org/dom/inputfile.html 에서 rm이 ​​이미 언급 한 기사 는 내가 본 것 중 최고입니다.

최신 정보

<input>태그를 직접 스타일링하는 것은 어렵지만 태그를 사용하면 쉽게 수행 할 수 있습니다 <label>. 아래 @JoshCrozier의 답변을 참조하십시오 : https://stackoverflow.com/a/25825731/10128619

이를 위해 JavaScript가 필요하지 않습니다! 크로스 브라우저 솔루션은 다음과 같습니다.

이 예를보십시오! -Chrome / FF / IE에서 작동-(IE10 / 9 / 8 / 7)

가장 좋은 방법은 숨겨진 파일 입력 요소에 for속성이 첨부 된 사용자 정의 레이블 요소를 사용하는 것 입니다. 이 작업을 수행 하려면 레이블의 속성이 파일 요소 의 속성과 일치해야합니다 .forid

<label for="file-upload" class="custom-file-upload">
    Custom Upload
</label>
<input id="file-upload" type="file"/>

대안으로, 파일 입력 요소를 레이블로 직접 랩핑 할 수도 있습니다 (예).

<label class="custom-file-upload">
    <input type="file"/>
    Custom Upload
</label>

스타일링 측면 에서 속성 선택기를 사용하여 입력 요소를 숨기십시오 ¹ .

input[type="file"] {
    display: none;
}

그런 다음 사용자 정의 label요소의 스타일을 지정하기 만하면됩니다. (예) .

.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}

^1-을 사용하여 요소를 숨기면 display: noneIE8 이하에서 작동하지 않습니다. 또한 jQuery validate 는 기본적으로 숨겨진 필드의 유효성을 검사 하지 않습니다 . 이러한 것들 중 하나가 문제가 될 경우, 이러한 상황에서 작동 하는 입력 ( 1 , 2 ) 을 숨기는 두 가지 방법 이 있습니다.

다음 단계에 따라 파일 업로드 양식에 대한 사용자 정의 스타일을 작성할 수 있습니다.

1. 이것은 간단한 HTML 양식입니다 (아래에 작성한 HTML 주석을 읽으십시오)

   <form action="#type your action here" method="POST" enctype="multipart/form-data">
     <div id="yourBtn" style="height: 50px; width: 100px;border: 1px dashed #BBB; cursor:pointer;" onclick="getFile()">Click to upload!</div>
     <!-- this is your file input tag, so i hide it!-->
     <div style='height: 0px;width:0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div>
     <!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
     <input type="submit" value='submit' >
   </form>

2. 그런 다음이 간단한 스크립트를 사용하여 click 이벤트를 파일 입력 태그로 전달하십시오.

   function getFile(){
        document.getElementById("upfile").click();
   }

   이제 기본 스타일을 변경하는 방법에 대한 걱정없이 모든 유형의 스타일을 사용할 수 있습니다.

한 달 반 동안 기본 스타일을 변경하려고했기 때문에 이것을 잘 알고 있습니다. 브라우저마다 업로드 입력 태그가 다르기 때문에 매우 어렵습니다. 따라서이 파일을 사용하여 사용자 정의 파일 업로드 양식을 작성하십시오. 전체 자동 업로드 코드는 다음과 같습니다.

function getFile() {
  document.getElementById("upfile").click();
}

function sub(obj) {
  var file = obj.value;
  var fileName = file.split("\\");
  document.getElementById("yourBtn").innerHTML = fileName[fileName.length - 1];
  document.myForm.submit();
  event.preventDefault();
}

#yourBtn {
  position: relative;
  top: 150px;
  font-family: calibri;
  width: 150px;
  padding: 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border: 1px dashed #BBB;
  text-align: center;
  background-color: #DDD;
  cursor: pointer;
}

<form action="#type your action here" method="POST" enctype="multipart/form-data" name="myForm">
  <div id="yourBtn" onclick="getFile()">click to upload a file</div>
  <!-- this is your file input tag, so i hide it!-->
  <!-- i used the onchange event to fire the form submission-->
  <div style='height: 0px;width: 0px; overflow:hidden;'><input id="upfile" type="file" value="upload" onchange="sub(this)" /></div>
  <!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
  <!-- <input type="submit" value='submit' > -->
</form>

CSS로 숨기고 $ (selector) .click ()과 함께 사용자 정의 버튼을 사용하여 찾아보기 버튼을 활성화하십시오. 그런 다음 파일 입력 유형의 값을 확인하는 간격을 설정하십시오. 간격은 사용자의 값을 표시하여 사용자가 업로드되는 내용을 볼 수 있습니다. 양식을 제출하면 간격이 지워집니다. [편집] 죄송합니다. 매우 바빠서이 게시물을 업데이트하는 것이 었습니다. 여기에 예가 있습니다.

<form action="uploadScript.php" method="post" enctype="multipart/form-data">
<div>
    <!-- filename to display to the user -->
    <p id="file-name" class="margin-10 bold-10"></p>

    <!-- Hide this from the users view with css display:none; -->
    <input class="display-none" id="file-type" type="file" size="4" name="file"/>

    <!-- Style this button with type image or css whatever you wish -->
    <input id="browse-click" type="button" class="button" value="Browse for files"/>

    <!-- submit button -->
    <input type="submit" class="button" value="Change"/>
</div>

$(window).load(function () {
    var intervalFunc = function () {
        $('#file-name').html($('#file-type').val());
    };
    $('#browse-click').on('click', function () { // use .live() for older versions of jQuery
        $('#file-type').click();
        setInterval(intervalFunc, 1);
        return false;
    });
});

HTML

<div class="new_Btn">SelectPicture</div><br>
<input id="html_btn" type='file'" /><br>

CSS

.new_Btn {
// your css propterties
}

#html_btn {
 display:none;
}

jQuery

$('.new_Btn').bind("click" , function () {
        $('#html_btn').click();
    });
//edit: 6/20/2014: Be sure to use ".on" not ".bind" for newer versions of jQuery

피들 : http://jsfiddle.net/M7BXC/

일반적인 JavaScript를 사용하면 jQuery 없이도 목표를 달성 할 수 있습니다.

이제 newBtn은 html_btn과 연결되어 있으며 원하는대로 새 btn의 스타일을 지정할 수 있습니다.

를 만들면 모든 렌더링 엔진이 자동으로 버튼을 <input type="file">생성합니다. 역사적으로이 버튼은 완전히 스타일을 지정할 수 없었습니다. 그러나 Trident와 WebKit은 유사 요소를 통해 후크를 추가했습니다.

삼지창

IE10부터는 ::-ms-browsepseudo-element를 사용하여 파일 입력 버튼의 스타일을 지정할 수 있습니다 . 기본적으로 일반 버튼에 적용하는 모든 CSS 규칙은 유사 요소에 적용 할 수 있습니다. 예를 들면 다음과 같습니다.

::-ms-browse {
  background: black;
  color: red;
  padding: 1em;
}

<input type="file">

이것은 Windows 8의 IE10에서 다음과 같이 표시됩니다.

WebKit

WebKit은 파일 ::-webkit-file-upload-button요소에 의사 요소 가 포함 된 후크를 제공합니다 . 다시 말하지만 거의 모든 CSS 규칙을 적용 할 수 있으므로 Trident 예제도 여기에서 작동합니다.

::-webkit-file-upload-button {
  background: black;
  color: red;
  padding: 1em;
}

<input type="file">

OS X의 Chrome 26에서 다음과 같이 표시됩니다.

Bootstrap 3을 사용하는 경우 이것이 효과가 있습니다.

참조 http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/를

.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;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<span class="btn btn-primary btn-file">
    Browse...<input type="file">
</span>

다음 파일 입력 버튼이 생성됩니다.

진심으로, http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/을 확인 하십시오

기본 드래그 앤 드롭 지원 여기 예를 들어 작업 : https://jsfiddle.net/j40xvkb3/

파일 입력의 스타일을 지정할 때 입력이 제공하는 기본 상호 작용을 중단해서는 안됩니다 .

이 display: none접근 방식은 기본 드래그 앤 드롭 지원을 중단합니다.

아무것도 끊지 않으려면 opacity: 0입력 방법을 사용하고 래퍼에서 상대 / 절대 패턴을 사용하여 배치해야합니다.

이 기술을 사용하면 사용자를위한 클릭 / 드롭 영역의 스타일을 쉽게 지정할 수 있으며, dragenter이벤트 에 자바 스크립트로 사용자 정의 클래스를 추가 하여 스타일을 업데이트하고 파일을 삭제할 수 있음을 사용자에게 피드백 할 수 있습니다.

HTML :

<label for="test">
  <div>Click or drop something here</div>
  <input type="file" id="test">
</label>

CSS :

input[type="file"] {
  position: absolute;
  left: 0;
  opacity: 0;
  top: 0;
  bottom: 0;
  width: 100%;
}

div {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ccc;
  border: 3px dotted #bebebe;
  border-radius: 10px;
}

label {
  display: inline-block;
  position: relative;
  height: 100px;
  width: 400px;
}

다음은 실제 예제입니다 ( dragover이벤트 및 삭제 된 파일 을 처리하기위한 추가 JS 포함 ).

https://jsfiddle.net/j40xvkb3/

이것이 도움이 되었기를 바랍니다!

아래 코드를 사용하여 순수한 CSS로 할 수 있습니다. 부트 스트랩과 글꼴이 훌륭합니다.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />

<label class="btn btn-default btn-sm center-block btn-file">
  <i class="fa fa-upload fa-2x" aria-hidden="true"></i>
  <input type="file" style="display: none;">
</label>

 <label>
    <input type="file" />
 </label>

입력 유형 = "file"을 입력 레이블 안에 랩핑 할 수 있습니다. 원하는대로 레이블의 스타일을 지정하고 디스플레이를 사용하여 입력을 숨 깁니다. none;

다음은 실제로 <input type="file" />요소의 스타일을 지정하지 않고 <input type="file" />다른 요소 위에 스타일을 지정할 수 있는 요소를 사용 하는 솔루션입니다 . 이 <input type="file" />요소는 실제로 표시되지 않으므로 전체적인 환영은 멋진 스타일의 파일 업로드 컨트롤입니다.

나는 최근 에이 문제를 겪었고 Stack Overflow에 대한 많은 답변에도 불구하고 실제로 그 법안에 맞는 사람은 없었습니다. 결국, 나는 간단하고 우아한 솔루션을 갖도록 이것을 사용자 정의했습니다.

나는 또한 Firefox, IE (11, 10 & 9), Chrome 및 Opera, iPad 및 몇 가지 안드로이드 장치에서 이것을 테스트했습니다.

다음은 JSFiddle 링크입니다-> http://jsfiddle.net/umhva747/

$('input[type=file]').change(function(e) {
    $in = $(this);
    $in.next().html($in.val());
    
});

$('.uploadButton').click(function() {
    var fileName = $("#fileUpload").val();
    if (fileName) {
        alert(fileName + " can be uploaded.");
    }
    else {
        alert("Please select a file to upload");
    }
});

body {
    background-color:Black;
}

div.upload {
    background-color:#fff;
    border: 1px solid #ddd;
    border-radius:5px;
    display:inline-block;
    height: 30px;
    padding:3px 40px 3px 3px;
    position:relative;
    width: auto;
}

div.upload:hover {
    opacity:0.95;
}

div.upload input[type="file"] {
    display: input-block;
    width: 100%;
    height: 30px;
    opacity: 0;
    cursor:pointer;
    position:absolute;
    left:0;
}
.uploadButton {
    background-color: #425F9C;
    border: none;
    border-radius: 3px;
    color: #FFF;
    cursor:pointer;
    display: inline-block;
    height: 30px;
    margin-right:15px;
    width: auto;
    padding:0 20px;
    box-sizing: content-box;
}

.fileName {
    font-family: Arial;
    font-size:14px;
}

.upload + .uploadButton {
    height:38px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form action="" method="post" enctype="multipart/form-data">
    <div class="upload">
        <input type="button" class="uploadButton" value="Browse" />
        <input type="file" name="upload" accept="image/*" id="fileUpload" />
        <span class="fileName">Select file..</span>
    </div>
    <input type="button" class="uploadButton" value="Upload File" />
</form>

도움이 되었기를 바랍니다!!!

이것은 jquery로 간단합니다. 약간 수정하여 Ryan 의 제안에 대한 코드 예제를 제공합니다 .

기본 HTML :

<div id="image_icon"></div>
<div id="filename"></div>
<input id="the_real_file_input" name="foobar" type="file">

준비가되면 입력에 스타일을 opacity: 0 설정 display: none해야합니다. 클릭 할 수 있어야하므로 설정할 수 없습니다 . 그러나 원하는 경우 "새"버튼 아래에 배치하거나 z- 색인을 사용하여 다른 곳에 배치 할 수 있습니다.

이미지를 클릭 할 때 실제 입력을 클릭하도록 jquery를 설정하십시오.

$('#image_icon').click(function() {
    $('#the_real_file_input').click();
});

이제 버튼이 작동 중입니다. 변경되면 값을 잘라 붙여 넣기 만하면됩니다.

$('input[type=file]').bind('change', function() {
    var str = "";
    str = $(this).val();
    $("#filename").text(str);
}).change();

타! val ()을 더 의미있는 것으로 구문 분석해야 할 수도 있지만 모두 설정해야합니다.

멋진 버튼이나 요소 위에 파일 업로드 버튼을 넣고 숨 깁니다.

매우 간단하며 모든 브라우저에서 작동합니다

<div class="upload-wrap">
    <button type="button" class="nice-button">upload_file</button>
    <input type="file" name="file" class="upload-btn">
</div>

스타일

.upload-wrap {
    position: relative;
}

.upload-btn {
    position: absolute;
    left: 0;
    opacity: 0;
}

가시성 : 숨겨진 트릭

나는 보통 visibility:hidden트릭에 간다

이것은 내 스타일 버튼입니다

<div id="uploadbutton" class="btn btn-success btn-block">Upload</div>

입력 유형 = 파일 버튼입니다. visibility:hidden규칙을 참고하십시오

<input type="file" id="upload" style="visibility:hidden;">

이것은 서로 붙일 수있는 JavaScript 비트입니다. 효과가있다

<script>
 $('#uploadbutton').click(function(){
    $('input[type=file]').click();
 });
 </script>

내가 생각할 수있는 유일한 방법은 렌더링 된 후 자바 스크립트로 버튼을 찾아 스타일을 할당하는 것입니다.

이 글을 볼 수도 있습니다

<input type="file" name="media" style="display-none" onchange="document.media.submit()">

나는 일반적으로 간단한 자바 스크립트를 사용하여 파일 입력 태그를 사용자 정의합니다. 숨겨진 입력 필드, 버튼 클릭시, JavaScript는 숨겨진 필드를 호출합니다 .CSS 또는 jquery를 사용하지 않는 간단한 솔루션입니다.

<button id="file" onclick="$('#file').click()">Upload File</button>

여기서는 span을 사용하여 유형 파일의 입력을 트리거하고 span을 간단히 사용자 정의 하므로이 방법을 사용하여 스타일을 추가 할 수 있습니다.

참고 숨겨진 옵션과 범위에 트리거 : 우리는 가시성 입력 태그를 사용하는 것이.

.attachFileSpan{
color:#2b6dad;
cursor:pointer;
}
.attachFileSpan:hover{
text-decoration: underline;
}

<h3> Customized input of type file </h3>
<input id="myInput" type="file" style="visibility:hidden"/>

        <span title="attach file" class="attachFileSpan" onclick="document.getElementById('myInput').click()">
        Attach file
        </span>

참고

머티리얼 / 앵귤러 파일 업로드로이를 수행하는 좋은 방법입니다. 부트 스트랩 버튼으로도 동일한 작업을 수행 할 수 있습니다.

참고이 <a>대신에 <button>클릭 이벤트가 발생합니다.

<label>
    <input type="file" (change)="setFile($event)" style="display:none" />

    <a mat-raised-button color="primary">
      <mat-icon>file_upload</mat-icon>
      Upload Document
    </a>

  </label>

CSS 만

이 매우 간단 하고 쉬운 사용

HTML :

<label>Attach your screenshort</label>
                <input type="file" multiple class="choose">

CSS :

.choose::-webkit-file-upload-button {
    color: white;
    display: inline-block;
    background: #1CB6E0;
    border: none;
    padding: 7px 15px;
    font-weight: 700;
    border-radius: 3px;
    white-space: nowrap;
    cursor: pointer;
    font-size: 10pt;
}

어쩌면 많은 차양일지도 모른다. 그러나 fa 버튼이있는 순수한 CSS에서는 이것을 좋아합니다.

.divs {
    position: relative;
    display: inline-block;
    background-color: #fcc;
}

.inputs {
    position:absolute;
    left: 0px;
    height: 100%;
    width: 100%;
    opacity: 0;
    background: #00f;
    z-index:999;
}

.icons {
    position:relative;
}

<div class="divs">
<input type='file' id='image' class="inputs">
<i class="fa fa-image fa-2x icons"></i>
</div>

<div class="divs">
<input type='file' id='book' class="inputs">
<i class="fa fa-book fa-5x icons"></i>
</div>
<br><br><br>
<div class="divs">
<input type='file' id='data' class="inputs">
<i class="fa fa-id-card fa-3x icons"></i>
</div>





<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

피들 : https://jsfiddle.net/zoutepopcorn/v2zkbpay/1/

실제로 매우 브라우저 별, 또는 오버레이 실제 버튼의 상단에있는 스타일 버튼, 또는 힘이다 "위대한"CSS 전용 솔루션에 속지 마십시오 당신은을 사용하는 <label>대신의 <button>, 또는 임의의 다른 해킹 . JavaScript는 일반적인 사용을 위해 필요합니다. 당신이 나를 믿지 않는다면 gmail과 DropZone이 어떻게하는지 연구하십시오.

원하는대로 일반 버튼의 스타일을 지정한 다음 간단한 JS 함수를 호출하여 숨겨진 입력 요소를 만들고 스타일이 지정된 버튼에 연결하십시오.

<!DOCTYPE html>
<meta charset="utf-8">

<style>
    button {
        width            : 160px;
        height           : 30px;
        font-size        : 13px;
        border           : none;
        text-align       : center;
        background-color : #444;
        color            : #6f0;
    }
    button:active {
        background-color : #779;
    }
</style>

<button id="upload">Styled upload button!</button>

<script>

function Upload_On_Click(id, handler) {
    var hidden_input = null;
    document.getElementById(id).onclick = function() {hidden_input.click();}
    function setup_hidden_input() {
        hidden_input && hidden_input.parentNode.removeChild(hidden_input);
        hidden_input = document.createElement("input");
        hidden_input.setAttribute("type", "file");
        hidden_input.style.visibility = "hidden";
        document.querySelector("body").appendChild(hidden_input);
        hidden_input.onchange = function() {
            handler(hidden_input.files[0]);
            setup_hidden_input();
        };
    }
    setup_hidden_input();
}

Upload_On_Click("upload", function(file) {
    console.log("GOT FILE: " + file.name);
});

</script>

사용자가 파일을 선택할 때마다 위의 코드가 어떻게 다시 연결되는지 확인하십시오. "onchange"는 사용자가 파일 이름을 변경 한 경우에만 호출되므로 중요합니다. 그러나 사용자가 파일을 제공 할 때마다 파일을 가져오고 싶을 것입니다.

파일 이름이 변환 된 여러 파일 솔루션

부트 스트랩 예

HTML :

<div>
  <label class="btn btn-primary search-file-btn">
    <input name="file1" type="file" style="display:None;"> <span>Choose file</span>
  </label>
  <span>No file selected</span>
</div>

<div>
  <label class="btn btn-primary search-file-btn">
    <input name="file2" type="file" style="display:None;"> <span>Choose file</span>
  </label>
  <span>No file selected</span>
</div>

1. jQuery가있는 JS :

$().ready(function($){
    $('.search-file-btn').children("input").bind('change', function() {
    var fileName = '';
    fileName = $(this).val().split("\\").slice(-1)[0];
    $(this).parent().next("span").html(fileName);
  })
});

2. jQuery가없는 JS

Array.prototype.forEach.call(document.getElementsByTagName('input'), function(item) {
  item.addEventListener("change", function() {
    var fileName = '';
    fileName = this.value.split("\\").slice(-1)[0];
    this.parentNode.nextElementSibling.innerHTML = fileName;
  });
});

다음은 선택한 파일 이름을 보여주는 솔루션입니다. http://jsfiddle.net/raft9pg0/1/

HTML :

<label for="file-upload" class="custom-file-upload">Chose file</label>
<input id="file-upload" type="file"/>
File: <span id="file-upload-value">-</span>

JS :

$(function() {
    $("input:file[id=file-upload]").change(function() {
        $("#file-upload-value").html( $(this).val() );
    });
});

CSS :

input[type="file"] {
    display: none;
}

.custom-file-upload {
      background: #ddd;
      border: 1px solid #aaa;
      border-top: 1px solid #ccc;
      border-left: 1px solid #ccc;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      border-radius: 3px;
      color: #444;
      display: inline-block;
      font-size: 11px;
      font-weight: bold;
      text-decoration: none;
      text-shadow: 0 1px rgba(255, 255, 255, .75);
      cursor: pointer;
      margin-bottom: 20px;
      line-height: normal;
      padding: 8px 10px; }

이번 주에는 버튼을 사용자 정의하고 선택한 파일 이름을 옆에 표시해야했기 때문에 위의 답변 중 일부를 읽은 후에 (Thanks BTW) 다음 구현을 생각해 냈습니다.

HTML :

<div class="browse">
<label id="uploadBtn" class="custom-file-upload">Choose file
<input type="file" name="fileInput" id="fileInput" accept=".yaml" ngf-select ngf-change="onFileSelect($files)" />
</label>
<span>{{fileName}}</span>
</div>

CSS

   input[type='file'] {
    color: #a1bbd5;
    display: none;

}

.custom-file-upload {
    border: 1px solid #a1bbd5;
    display: inline-block;
    padding: 2px 8px;
    cursor: pointer;
}

label{
    color: #a1bbd5;
    border-radius: 3px;
}

자바 스크립트 (Angular)

app.controller('MainCtrl', function($scope) {

        $scope.fileName = 'No file chosen';

          $scope.onFileSelect = function ($files) {
          $scope.selectedFile = $files;
          $scope.fileName = $files[0].name;
    };
});

기본적으로 나는 ng-file-upload lib로 작업하고 있습니다. 각도별로 파일 이름을 $ scope에 바인딩하고 'No file selected'의 초기 값을 지정하고 onFileSelect () 함수도 바인딩합니다. 내 범위는 파일이 선택되면 ng-upload API를 사용하여 파일 이름을 가져 와서 $ scope.filename에 할당합니다.

스타일을 클릭 할 때 함수 <input>를 사용하여 클릭을 시뮬레이션 trigger()하면됩니다 <div>. 에서 내 버튼을 만든 다음 내 버튼을 <div>클릭 input했을 때 클릭이 발생했습니다 <div>. 이를 통해 원하는 버튼을 만들 수 있으며 버튼 <div>은 파일 클릭을 시뮬레이트 하기 때문에 가능 합니다 <input>. 그런 다음에 사용 display: none하십시오 <input>.

// div styled as my load file button
<div id="simClick">Load from backup</div>

<input type="file" id="readFile" />

// Click function for input
$("#readFile").click(function() {
    readFile();
});

// Simulate click on the input when clicking div
$("#simClick").click(function() {
    $("#readFile").trigger("click");
});

가장 좋은 방법은 의사 요소 인 : after 또는 : before를 de input 위에있는 요소로 사용하는 것입니다. 그런 다음 원하는 의사 요소의 스타일을 지정하십시오. 다음과 같이 모든 입력 파일에 대해 일반적인 스타일로 수행 할 것을 권장합니다.

input {
  height: 0px;
  outline: none;
}

input[type="file"]:before {
  content: "Browse";
  background: #fff;
  width: 100%;
  height: 35px;
  display: block;
  text-align: left;
  position: relative;
  margin: 0;
  margin: 0 5px;
  left: -6px;
  border: 1px solid #e0e0e0;
  top: -1px;
  line-height: 35px;
  color: #b6b6b6;
  padding-left: 5px;
  display: block;
}

내가 찾은 가장 좋은 방법은 input type: file로 설정하는 것 display: none입니다. 줘 id. 파일 입력을 열 단추 또는 다른 요소를 작성하십시오.

그런 다음 클릭 할 때 원래 파일 입력에 대한 클릭을 시뮬레이션하는 이벤트 리스너를 추가하십시오 (버튼). hello라는 버튼을 클릭하는 것처럼 파일 창이 열립니다.

예제 코드

//i am using semantic ui

<button class="ui circular icon button purple send-button" id="send-btn">
      <i class="paper plane icon"></i>
    </button>
  <input type="file" id="file" class="input-file" />

자바 스크립트

var attachButton=document.querySelector('.attach-button');
    attachButton.addEventListener('click', e=>{
        $('#file').trigger("click")
    })

CSS는 약간의 속임수로 여기에서 많은 것을 할 수 있습니다 ...

<div id='wrapper'>
  <input type='file' id='browse'>
</div>

#wrapper {
     width: 93px; /*play with this value */
     height: 28px; /*play with this value */
     background: url('browseBtn.png') 0 0 no-repeat;
     border:none;
     overflow:hidden;
}

#browse{
     margin-left:-145px; /*play with this value */
     opacity:0; /* set to .5 or something so you can better position it as an overlay then back to zero again after you're done */
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
}

:: 참조 :: http://site-o-matic.net/?viewpost=19

-대사원

파일 버튼을 사진으로 전환하는 매우 쉬운 방법을 찾았습니다. 사진에 라벨을 붙이고 파일 버튼 위에 놓기 만하면됩니다.

<html>
<div id="File button">
    <div style="position:absolute;">
        <!--This is your labeled image-->
        <label for="fileButton"><img src="ImageURL"></label>
    </div>
    <div>
        <input type="file" id="fileButton"/>
    </div>
</div>
</html>

레이블이있는 이미지를 클릭하면 파일 버튼을 선택합니다.

이 접근 방식 만이 전체 유연성을 제공합니다! ES6 / 바닐라 JS!

html :

<input type="file" style="display:none;"></input>
<button>Upload file</button>

자바 스크립트 :

document.querySelector('button').addEventListener('click', () => {
  document.querySelector('input[type="file"]').click();
});

이것은 입력 파일 버튼을 숨기지 만 후드 아래에서 다른 일반 버튼에서 클릭하면 다른 버튼과 마찬가지로 스타일을 지정할 수 있습니다. 이것은 쓸모없는 DOM 노드와 별다른 단점이없는 유일한 솔루션입니다. 덕분에display:none; 입력 버튼은 DOM에서 보이는 공간을 예약하지 않습니다.

(나는 더 이상 누구에게 이것에 대한 소품을 줄지 모른다. 그러나 나는 어딘가에서 Stackoverflow에 대한 아이디어를 얻었다.)