<입력 유형 =“파일”>을 사용자 정의하는 방법은 무엇입니까?

164

모양을 바꿀 수 <input type="file">있습니까?

— 초보자 코더
소스

텍스트 필드가있는 이유는 사용자가 파일을 찾아보고 선택한 후 파일 경로를 표시하기 때문입니다.

— k to z

Oooppss .. 그것은 파이어 폭스가 처리하는 방식 인 것 같습니다 ...

— Newbie Coder

파일을 찾은 후에도 여전히 양식 제출 버튼을 사용하여 양식을 제출해야합니다.

— k to z

2

훨씬 간단한 방법 은 이 솔루션 을 참조하십시오 .

— Joeytje50

1

미래의 질문을 오래된 질문의 복제본으로 표시하는 것은 약간 이상합니다. 질문을 다시 한 다음 원래 질문을 닫는 것이 우선 순위를 설정합니까? 중복은 이미 큰 문제입니다. 기존 답변이 오래 된 질문을 다시 묻는 데 가치가 있지만 질문을 편집하고 새 답변을 추가 / 편집하는 것이 항상 가능합니다.

— alex

235

input[type=file]컨트롤 자체 에 대해서는 많이 수정할 수 없습니다 .

label입력과 올바르게 페어링 된 요소를 클릭하면 활성화 / 포커스되므로 a label를 사용 하여 OS 찾아보기 대화 상자를 트리거 할 수 있습니다 .

당신이 그것을 할 수있는 방법은 여기 있습니다…

label {
   cursor: pointer;
   /* Style as you please, it will become the visible UI component. */
}

#upload-photo {
   opacity: 0;
   position: absolute;
   z-index: -1;
}

<label for="upload-photo">Browse...</label>
<input type="file" name="photo" id="upload-photo" />

스 니펫 확장

양식 컨트롤의 CSS는 문서 레이아웃에서 공간을 차지하지 않고 보이지 않게 표시하지만 여전히 존재 하므로를 통해 활성화 할 수 있습니다 label.

선택한 후 사용자가 선택한 경로를 표시하려면 changeJavaScript 를 사용하여 이벤트를 수신 한 후 브라우저가 제공하는 경로를 읽을 수 있습니다 (보안상의 이유로 정확한 경로에 대해 거짓말 을 할 수 있음 ). 최종 사용자에게 적합하게 만드는 방법은 반환 된 경로의 기본 이름을 사용하는 것입니다 (따라서 사용자는 선택한 파일 이름 만 볼 수 있음).

있습니다 Tympanus에 의해 큰 가이드 이 스타일링에 대한이.

— 알렉스
소스

2

컨테이너의 아무 곳이나 클릭하여 파일 선택 대화 상자를 여는 것을 목표로 생각하면 더 나은 스타일이라고 생각합니다.

#container { position: relative; width: ...px; height: ...px; overflow: hidden; } #input { position: absolute; right: 0; font-size: <many a>px; opacity: 0; margin: 0; padding: 0; border: none; }

— x-yuri

1

사용 <label>(Tympanus로 나타내는 바와 같이하면) 훨씬 더 의미 이하 해키. 또한이 질문은 몇 년 후에 다시 요청되었으며 거기에 훨씬 더 나은 답변이 있습니다 : 파일 업로드 버튼에 대한 브라우저 간 사용자 정의 스타일 .

— Dan Dascalescu

1

@DanDascalescu 동의합니다. (2011 년으로 돌아온) 올바르게 기억할 수 있다면 IE, 6 또는 7에 문제가 있다고 생각합니다.이 답변을 편집하여 미래에 가져올 것입니다.

— alex

라벨을 사용하는 것이 더 좋은 이유는 무엇입니까? 레이블을 탭할 수 없으며 대화 상자를 활성화하는 레이블보다 단추가 더 의미가 있습니다.

— Louis-Marie Matthews

1

@alex, 파일 이름이 표시되지 않습니다.

— Naren Verma

33

그런 것 같아요?

<form>
  <input id="fileinput" type="file" style="display:none;"/>
</form>
<button id="falseinput">El Cucaratcha, for example</button>
<span id="selected_filename">No file selected</span>

<script>
$(document).ready( function() {
  $('#falseinput').click(function(){
    $("#fileinput").click();
  });
});
$('#fileinput').change(function() {
  $('#selected_filename').text($('#fileinput')[0].files[0].name);
});

</script>

— 콘 서빈
소스

1

이 경우, 즉 9는 양식을 iframe으로 보낼 수 없습니다.

— x-yuri

@ x-yuri 무슨 뜻인가요?

— Micaël Félix

2

내가 기억하는 한, 예를 들어 9 (및 아마도 다른 것)는 사용자가 입력 파일을 클릭하지 않았기 때문에 양식을 iframe으로 보낼 수 없습니다.

— x-yuri

display: none탭 순서에서 입력을 제거하여 페이지에 액세스하기가 어렵습니다. 사용 <label>(Tympanus로 나타내는 바와 같이하면) 훨씬 더 의미 이하 해키. 또한이 질문은 몇 년 후에 다시 요청되었으며 거기에 훨씬 더 나은 답변이 있습니다 : 파일 업로드 버튼에 대한 브라우저 간 사용자 정의 스타일 .

— Dan Dascalescu

선택기에 대괄호 오타 정기하면 코드를 실제로 작동하도록

— 콘스탄틴은 Groß

23

  <label for="fusk">dsfdsfsd</label>
  <input id="fusk" type="file" name="photo" style="display: none;">

왜 안돼? ^ _ ^

여기 예를 참조 하십시오

— jt3k
소스

4

@InakiIbarrolaAtxa 당신은 이것을 지원하기 위해 데이터를 제공 할 수 있습니까?

— Ben Leggiero

1

크롬 51에서하지 스타일 아무것도합니까 사용 <label>(Tympanus 같이) 의미 상 올바른 솔루션입니다. 또한이 질문은 몇 년 후에 다시 요청되었으며 거기에 훨씬 더 나은 답변이 있습니다 : 파일 업로드 버튼에 대한 브라우저 간 사용자 정의 스타일 .

— Dan Dascalescu

12

부트 스트랩을 사용하는 경우 여기에 더 나은 솔루션이 있습니다.

<label class="btn btn-default btn-file">
    Browse <input type="file" style="display: none;">
</label>

IE8 이하의 경우 http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/

출처 : https://stackoverflow.com/a/18164555/625952

— 오우디
소스

이 링크가 질문에 대한 답변을 제공 할 수 있지만 여기에 답변의 필수 부분을 포함시키고 참조 용 링크를 제공하는 것이 좋습니다. 링크 된 페이지가 변경되면 링크 전용 답변이 유효하지 않을 수 있습니다. - 리뷰에서

— Tom

완료, 예를

— 들었습니다

10

가장 쉬운 방법..

<label>
     Upload
    <input type="file" style="visibility: hidden;"/>
</label>

— caden311
소스

아무도 이것을 알아 차리지 못했습니다.

— rootExplorr

1

나는 게임에 늦었다

— caden311

6

웹킷에서 이것을 시도해 볼 수 있습니다 ...

input[type="file"]::-webkit-file-upload-button{
   /* style goes here */
}

— 크리스토퍼 리드
소스

파이어 폭스에 대한 비슷한 솔루션을 알고 있습니까? 존재합니까? )

— Artem Z.

5

우선 컨테이너입니다.

<div class="upload_file_container">
    Select file!
    <input type="file" name="photo" />
</div>

두 번째는 CSS 스타일이므로 더 많은 사용자 정의를 원한다면 눈을 뜨고 있어야합니다. :)

.upload_file_container{
   width:100px;
   height:40px;
   position:relative;
   background(your img);
}

.upload_file_container input{
   width:100px;
   height:40px;
   position:absolute;
   left:0;
   top:0;
   cursor:pointer;
}

이 예제는 버튼 내부의 텍스트 스타일이 아니며 글꼴 크기에 따라 다르며 컨테이너의 높이와 패딩 상단 값만 수정하십시오.

— 주리 카라 조프
소스

right: 0대신 왜 당신이 그것을 만들지 left: 0않습니까? 그렇게하면 컨테이너에 텍스트 상자가 있습니다. 텍스트 상자를 클릭해도 파일 선택 대화 상자가 열리지 않습니다. 또한 입력 파일을 크게 만드는 font-size것이 훨씬 좋은 아이디어라고 생각 width하고 and 를 사용 height합니다.

— x-yuri

5

트릭은 입력을 숨기고 레이블을 사용자 정의하는 것입니다.

HTML :

<div class="inputfile-box">
  <input type="file" id="file" class="inputfile" onchange='uploadFile(this)'>
  <label for="file">
    <span id="file-name" class="file-box"></span>
    <span class="file-button">
      <i class="fa fa-upload" aria-hidden="true"></i>
      Select File
    </span>
  </label>
</div>

CSS :

.inputfile-box {
  position: relative;
}

.inputfile {
  display: none;
}

.container {
  display: inline-block;
  width: 100%;
}

.file-box {
  display: inline-block;
  width: 100%;
  border: 1px solid;
  padding: 5px 0px 5px 5px;
  box-sizing: border-box;
  height: calc(2rem - 2px);
}

.file-button {
  background: red;
  padding: 5px;
  position: absolute;
  border: 1px solid;
  top: 0px;
  right: 0px;
}

JS :

function uploadFile(target) {
    document.getElementById("file-name").innerHTML = target.files[0].name;
}

이 예제를 확인할 수 있습니다 : https://jsfiddle.net/rjurado/hnf0zhy1/4/

— 건조기
소스

나는 다른 것들과 달리 Font Awesome 아이콘을 어떻게 사용하는지 좋아합니다.

— Max Voisard

4

를 사용 <label>하고을 숨기고 <input>라벨을 맞춤 설정하는 것이 훨씬 좋습니다 .

HTML :

<input type="file" id="input">
<label for="input" id="label">Choose File</label>

CSS :

input#input{
    display: none;
}
label#label{
    /* Customize your label here */
}

— 보그 단 M.
소스

display: none탭 순서에서 요소를 제거합니다. 사용 <label>(Tympanus 같이하는) 의미 론적으로 올바른 방법이지만, 일부 개선이 필요합니다. 또한이 질문은 몇 년 후에 다시 요청되었으며 거기에 훨씬 더 나은 답변이 있습니다 : 파일 업로드 버튼에 대한 브라우저 간 사용자 정의 스타일 .

— Dan Dascalescu

2

선택한 파일의 경로를 표시하려면 html에서 시도하십시오.

<div class="fileinputs">
    <input type="file" class="file">
</div>

그리고 자바 스크립트에서 :

        var fakeFileUpload = document.createElement('div');
        fakeFileUpload.className = 'fakefile';
        var image = document.createElement('div');
        image.className='fakebtn';
        image.innerHTML = 'browse';
        fakeFileUpload.appendChild(image);
        fakeFileUpload.appendChild(document.createElement('input'));
        var x = document.getElementsByTagName('input');
        for (var i=0;i<x.length;i++) {
            if (x[i].type != 'file') continue;
            if (x[i].parentNode.className != 'fileinputs') continue;
            x[i].className = 'file hidden';
            var clone = fakeFileUpload.cloneNode(true);
            x[i].parentNode.appendChild(clone);
            x[i].relatedElement = clone.getElementsByTagName('input')[0];
            x[i].onchange = x[i].onmouseout = function () {
                this.relatedElement.value = this.value;
            }
        }

그리고 스타일 :

div.fileinputs {
    position: relative;
    height: 30px;
    width: 370px;
}
input.file.hidden {
    position: relative;
    text-align: right;
    -moz-opacity: 0;
    filter: alpha(opacity: 0);
    opacity: 0;
    z-index: 2;
}
div.fakefile {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0;
    width: 370px;
    padding: 0;
    margin: 0;
    z-index: 1;
    line-height: 90%;
}
div.fakefile input {
    margin-bottom: 5px;
    margin-left: 0;
    border: none;
    box-shadow: 0px 0px 2px 1px #ccc;
    padding: 4px;
    width: 241px;
    height: 20px;
}
div.fakefile .fakebtn{
    width: 150px;
    background: #eb5a41;
    z-index: 10;
    font-family: roya-bold;
    border: none;
    padding: 5px 15px;
    font-size: 18px;
    text-align: center;
    cursor: pointer;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
    display: inline;
    margin-left: 3px;
}
div.fileinputs input[type="file"]:hover + div .fakebtn{
    background: #DA472E;
}

div.fileinputs input[type="file"] {
    opacity: 0;
    position: absolute;
    top: -6px;
    right: 0px;
    z-index: 20;
    width: 102px;
    height: 40px;
    cursor: pointer;
}

— saghar.fadaei
소스

Salam saghar 님, 이것이 저에게 가장 적합한 대답입니다, 감사합니다

— ucMedia

2

부트 스트랩 예

<label className="btn btn-info btn-lg">
  Upload
  <input type="file" style="display: none" />
</label>

— juliankmazo
소스

1

업로드 된 파일 이름의 핸들러를 사용자 정의하여 찾아보기 버튼을 완전히 사용자 정의하는 방법을 설명하는이 옵션을 사용했습니다. 추가 필드와 클라이언트 측 컨트롤을 추가하여 독립형이 아닌 "실제"형식으로 찾아보기를 포함하는 방법을 보여줍니다.

코드 펜은 다음과 같습니다. http://codepen.io/emiemi/pen/zxNXWR

JS :

//click on our custom btn triggers a click on the hidden actual file input 
$("#btnup").click(function(){
   $("#fileup").click();    
});


//changes on the three fields (input, tit,and name) trigger a control which checks if the 3 fields are all filled and if file field is valid (an image is uploaded)
$('#fileup').change(function(){
    var formDOMObj = document.upload;
//here we assign tu our text field #fileup the name of the selected file  
    var res=$('#fileup').val();
    var arr = res.split("\\");
//if file is not valid we show the error icon and the red alert
    if (formDOMObj.fileup.value.indexOf(".jpg") == -1 && formDOMObj.fileup.value.indexOf(".png") == -1 &&  formDOMObj.fileup.value.indexOf(".jpeg") == -1 && formDOMObj.fileup.value.indexOf(".bmp") == -1 && formDOMObj.fileup.value.indexOf(".JPG") == -1 && formDOMObj.fileup.value.indexOf(".PNG") == -1 &&  formDOMObj.fileup.value.indexOf(".JPEG") == -1 && formDOMObj.fileup.value.indexOf(".BMP") == -1){
        $( ".imgupload" ).hide("slow"); 
        $( ".imguploadok" ).hide("slow");   
        $( ".imguploadstop" ).show("slow");
        $('#nomefile').css({"color":"red","font-weight":700});
        $('#nomefile').html("The file "+arr.slice(-1)[0]+" is not an image!");
        $( "#bottone" ).hide();
        $( "#fakebtn" ).show();
    }else{
 //if file is valid we show the green alert
    $( ".imgupload" ).hide("slow");
    $( ".imguploadstop" ).hide("slow");
    $( ".imguploadok" ).show("slow");
    $('#nomefile').html(arr.slice(-1)[0]);
    $('#nomefile').css({"color":"green","font-weight":700});
    if (formDOMObj.nome.value!=""&&formDOMObj.tit.value!=""&&formDOMObj.fileup.value!=""){
  //if all three fields are valid the fake input btn is hidden and the actual one i s finally hown
        $( "#fakebtn" ).hide();
        $( "#bottone" ).show();
    }
    }
});


$('#nome').change(function(){
//same as file change but on name field
    var formDOMObj = document.upload;
    if (formDOMObj.nome.value!=""&&formDOMObj.tit.value!=""&&formDOMObj.fileup.value!=""){
        $( "#fakebtn" ).hide();
        $( "#bottone" ).show();
    }else{
        $( "#bottone" ).hide();
        $( "#fakebtn" ).show();
    }
});
$('#tit').change(function(){
 //same as file change but on tit field
    var formDOMObj = document.upload;
    if (formDOMObj.nome.value!=""&&formDOMObj.tit.value!=""&&formDOMObj.fileup.value!=""){
        $( "#fakebtn" ).hide();
        $( "#bottone" ).show();
    }else{
        $( "#bottone" ).hide();
        $( "#fakebtn" ).show();
    }
});

HTML :

<form name="upload" method="post" action="/" enctype="multipart/form-data" accept-charset="utf-8">
<div class="row">
  <div class="col-md-6 center">
<!--this is the actual file input, s hidden beacause we wanna use our custom one-->
    <input type="file" value="" class="hidden" name="fileup" id="fileup">
    <div class="btn-container">
<!--the three icons: default, ok file (img), error file (not an img)-->
      <h1 class="imgupload"><i class="fa fa-file-image-o"></i></h1>
      <h1 class="imguploadok"><i class="fa fa-check"></i></h1>
      <h1 class="imguploadstop"><i class="fa fa-times"></i></h1>
<!--this field changes dinamically displaying the filename we are trying to upload-->
      <p id="nomefile">Only pics allowed! (jpg,jpeg,bmp,png)</p>
<!--our custom btn which triggers the actual hidden one-->
      <button type="button" id="btnup" class="btn btn-primary btn-lg">Browse for your pic!</button>
    </div>
  </div>
<!--additional fields-->
  <div class="col-md-6">
    <div class="row">
      <div class="form-group" id="top">
        <div class="col-md-12">
          <input type="text" maxlength="100" class="form-control" name="nome" id="nome" placeholder="Your Name">
        </div>
      </div>
    </div>
    <div class="row">
      <div class="form-group">
        <div class="col-md-12">
          <input type="text" maxlength="50" class="form-control" name="tit" id="tit" placeholder="I am rubber, you are glue">
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-8">
        <p class="white">All fields are mandatory</p>
      </div>
      <div class="col-md-4">
<!--the defauld disabled btn and the actual one shown only if the three fields are valid-->
        <input type="submit" value="Submit!" class="btn btn-primary" id="bottone" style="padding-left:50px; padding-right:50px; display:none;">
        <button type="button" class="btn btn-default" disabled="disabled" id="fakebtn"  style="padding-left:40px; padding-right:40px;">Submit! <i class="fa fa-minus-circle"></i></button>
      </div>
    </div>
  </div>
</div>

— 에미 씨
소스

0

입력이 전체 컨테이너를 채우도록하기 때문에 내가 좋아하는 한 가지 방법이 있습니다. 트릭은 "font-size : 100px"이며 "overflow : hidden"및 상대 위치와 함께 이동해야합니다.

<div id="upload-file-container" >
   <input type="file" />
</div>

#upload-file-container {
   width: 200px;
   height: 50px;
   position: relative;
   border: dashed 1px black;
   overflow: hidden;
}

#upload-file-container input[type="file"]
{
   margin: 0;
   opacity: 0;   
   font-size: 100px;
}

— 반자
소스

그것은 그것을 만들 의미가 있습니다position: absolute; right: 0; font-size: <many>px;

— X-유리

0

스타일을 지정할 수는 있지만 이미 존재하는 요소는 제거 할 수 없습니다. 당신이 창조적이라면, 당신은 그것으로 작업하고 다음과 같이 할 수 있습니다 :

input[type=file] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #EEE;
    background: linear-gradient(to top, #FFF, #DDD);
    border: thin solid rgba(0,0,0, .5);
    border-radius: .25em;
    box-shadow: inset .25em .25em .25em rgba(255,255,255, .5), inset -.1em -.1em .1em rgba(0,0,0, 0.1);
    cursor: text;
    padding: .25em;
}

http://jsfiddle.net/zr1x1m2b/1/

이 코드로 놀아보고, 줄을 제거하고, 자신을 추가하고, 좋아하는 모양을 얻을 때까지 무엇이든하십시오!

— 벤 레지에로
소스

1

"파일 선택"단어의 스타일을 지정하지 않습니다. 사용 <label>(Tympanus 같이하는) 의미와 이벤트 완전한 커스터마이즈이다. 또한이 질문은 몇 년 후에 다시 요청되었으며 거기에 훨씬 더 나은 답변이 있습니다 : 파일 업로드 버튼에 대한 브라우저 간 사용자 정의 스타일 .

— Dan Dascalescu

1

@DanDascalescu 당신이 맞아요! 설정으로 HTML을 변경할 수없는 경우를 대비하여 순수한 CSS 솔루션을 제공하고 있습니다.

— Ben Leggiero

0

좋아하는 CSS를 사용하여 원하는대로 일반 버튼의 스타일을 지정하십시오.

그런 다음 간단한 JS 함수를 호출하여 숨겨진 입력 요소를 작성하고 스타일이 지정된 단추에 연결하십시오. 숨기기 부분을 수행하기 위해 브라우저 별 CSS를 추가하지 마십시오.

<!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"는 사용자가 파일 이름을 변경 한 경우에만 호출되므로 중요합니다. 그러나 사용자가 파일을 제공 할 때마다 파일을 가져오고 싶을 것입니다.

자세한 내용은 DropZone 및 gmail 업로드를 조사하십시오.

— personal_cloud
소스

0

 $(document).ready(function () {
        $(document).mousemove(function () {
        $('#myList').css('display', 'block');
        $("#seebtn").css('display', 'none');
        $("#hidebtn").css('display', 'none');
        $('#displayFileNames').html('');
        $("#myList").html('');
        var fileArray1 = document.getElementsByClassName('file-input');
        for (var i = 0; i < fileArray1.length; i++) {
            var files = fileArray1[i].files;
            for (var j = 0; j < files.length; j++) {
                $("#myList").append("<li style='color:black'>" + files[j].name + "</li>");
            }
        };

        if (($("#myList").html()) != '') {
            $('#unselect').css('display', 'block');
            $('#divforfile').css('color', 'green');
            $('#attach').css('color', 'green');
            $('#displayFileNames').html($("#myList").children().length + ' ' + 'files selezionato');

        };

        if (($("#myList").html()) == '') {
            $('#divforfile').css('color', 'black');
            $('#attach').css('color', 'black');
            $('#displayFileNames').append('Nessun File Selezionato');
        };
    });

  });

  function choosefiles(obj) {
        $(obj).hide();
        $('#myList').css('display', 'none');
        $('#hidebtn').css('display', 'none');
        $("#seebtn").css('display', 'none');
        $('#unselect').css('display', 'none');
        $("#upload-form").append("<input class='file-input inputs' type='file' onclick='choosefiles(this)' name='file[]' multiple='multiple' />");
        $('#displayFileNames').html('');
    }

  $(document).ready(function () {
        $('#unselect').click(function () {
            $('#hidebtn').css('display', 'none');
            $("#seebtn").css('display', 'none');
            $('#displayFileNames').html('');
            $("#myList").html('');
            $('#myFileInput').val('');
            document.getElementById('upload-form').reset();         
            $('#unselect').css('display', 'none');
            $('#divforfile').css('color', 'black');
            $('#attach').css('color', 'black');

        });
    });

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
  .divs {
        position: absolute;
        display: inline-block;
        background-color: #fff;
    }

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

    .icons {
        position: absolute;
    }

 </style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
            <div>
                <form id='upload-form' action='' method='post' enctype='multipart/form-data'>
                   
                    <div class="divs" id="divforfile" style="color:black">
                        <input id='myFileInput' class='file-input inputs' type='file' name='file[]' onclick="choosefiles(this)" multiple='multiple' />
                        <i class="material-icons" id="attach" style="font-size:21px;color:black">attach_file</i><label>Allegati</label>
                    </div>
                </form>
                <br />
            </div>
            <br />  
            <div>
                <button style="border:none; background-color:white; color:black; display:none" id="seebtn"><p>Files &#9660;</p></button>
                <button style="border:none; background-color:white; color:black; display:none" id="hidebtn"><p>Files &#9650;</p></button>
                <button type="button" class="close" aria-label="Close" id="unselect" style="display:none;float:left">
                    <span style="color:red">&times;</span>
                </button>
                <div id="displayFileNames">
                </div>
                <ul id="myList"></ul>
            </div>

스 니펫 확장

이것은 jquery & javascript (Visual studio)를 사용하여 완벽하게 작동하는 고객 화 된 파일 업로드 / 첨부 파일입니다. 이것은 유용합니다!

코멘트 섹션에서 코드를 사용할 수 있습니다!

링크 : https://youtu.be/It38OzMAeig

즐겨 :)

 $(document).ready(function () {
        $(document).mousemove(function () {
        $('#myList').css('display', 'block');
        $("#seebtn").css('display', 'none');
        $("#hidebtn").css('display', 'none');
        $('#displayFileNames').html('');
        $("#myList").html('');
        var fileArray1 = document.getElementsByClassName('file-input');
        for (var i = 0; i < fileArray1.length; i++) {
            var files = fileArray1[i].files;
            for (var j = 0; j < files.length; j++) {
                $("#myList").append("<li style='color:black'>" + files[j].name + "</li>");
            }
        };

        if (($("#myList").html()) != '') {
            $('#unselect').css('display', 'block');
            $('#divforfile').css('color', 'green');
            $('#attach').css('color', 'green');
            $('#displayFileNames').html($("#myList").children().length + ' ' + 'files selezionato');

        };

        if (($("#myList").html()) == '') {
            $('#divforfile').css('color', 'black');
            $('#attach').css('color', 'black');
            $('#displayFileNames').append('Nessun File Selezionato');
        };
    });

  });

  function choosefiles(obj) {
        $(obj).hide();
        $('#myList').css('display', 'none');
        $('#hidebtn').css('display', 'none');
        $("#seebtn").css('display', 'none');
        $('#unselect').css('display', 'none');
        $("#upload-form").append("<input class='file-input inputs' type='file' onclick='choosefiles(this)' name='file[]' multiple='multiple' />");
        $('#displayFileNames').html('');
    }

  $(document).ready(function () {
        $('#unselect').click(function () {
            $('#hidebtn').css('display', 'none');
            $("#seebtn").css('display', 'none');
            $('#displayFileNames').html('');
            $("#myList").html('');
            $('#myFileInput').val('');
            document.getElementById('upload-form').reset();         
            $('#unselect').css('display', 'none');
            $('#divforfile').css('color', 'black');
            $('#attach').css('color', 'black');

        });
    });

<style>
  .divs {
        position: absolute;
        display: inline-block;
        background-color: #fff;
    }

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

    .icons {
        position: absolute;
    }

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

   <div>
                <form id='upload-form' action='' method='post' enctype='multipart/form-data'>
                   
                    <div class="divs" id="divforfile" style="color:black">
                        <input id='myFileInput' class='file-input inputs' type='file' name='file[]' onclick="choosefiles(this)" multiple='multiple' />
                        <i class="material-icons" id="attach" style="font-size:21px;color:black">attach_file</i><label>Allegati</label>
                    </div>
                </form>
                <br />
            </div>
            <br />  
            <div>
                <button style="border:none; background-color:white; color:black; display:none" id="seebtn"><p>Files &#9660;</p></button>
                <button style="border:none; background-color:white; color:black; display:none" id="hidebtn"><p>Files &#9650;</p></button>
                <button type="button" class="close" aria-label="Close" id="unselect" style="display:none;float:left">
                    <span style="color:red">&times;</span>
                </button>
                <div id="displayFileNames">
                </div>
                <ul id="myList"></ul>
            </div>

스 니펫 확장

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 $(document).ready(function () {
        $(document).mousemove(function () {
        $('#myList').css('display', 'block');
        $("#seebtn").css('display', 'none');
        $("#hidebtn").css('display', 'none');
        $('#displayFileNames').html('');
        $("#myList").html('');
        var fileArray1 = document.getElementsByClassName('file-input');
        for (var i = 0; i < fileArray1.length; i++) {
            var files = fileArray1[i].files;
            for (var j = 0; j < files.length; j++) {
                $("#myList").append("<li style='color:black'>" + files[j].name + "</li>");
            }
        };

        if (($("#myList").html()) != '') {
            $('#unselect').css('display', 'block');
            $('#divforfile').css('color', 'green');
            $('#attach').css('color', 'green');
            $('#displayFileNames').html($("#myList").children().length + ' ' + 'files selezionato');

        };

        if (($("#myList").html()) == '') {
            $('#divforfile').css('color', 'black');
            $('#attach').css('color', 'black');
            $('#displayFileNames').append('Nessun File Selezionato');
        };
    });

  });

  function choosefiles(obj) {
        $(obj).hide();
        $('#myList').css('display', 'none');
        $('#hidebtn').css('display', 'none');
        $("#seebtn").css('display', 'none');
        $('#unselect').css('display', 'none');
        $("#upload-form").append("<input class='file-input inputs' type='file' onclick='choosefiles(this)' name='file[]' multiple='multiple' />");
        $('#displayFileNames').html('');
    }

  $(document).ready(function () {
        $('#unselect').click(function () {
            $('#hidebtn').css('display', 'none');
            $("#seebtn").css('display', 'none');
            $('#displayFileNames').html('');
            $("#myList").html('');
            $('#myFileInput').val('');
            document.getElementById('upload-form').reset();         
            $('#unselect').css('display', 'none');
            $('#divforfile').css('color', 'black');
            $('#attach').css('color', 'black');

        });
    });

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
  .divs {
        position: absolute;
        display: inline-block;
        background-color: #fff;
    }

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

    .icons {
        position: absolute;
    }

 </style>

 <div>
                <form id='upload-form' action='' method='post' enctype='multipart/form-data'>
                   
                    <div class="divs" id="divforfile" style="color:black">
                        <input id='myFileInput' class='file-input inputs' type='file' name='file[]' onclick="choosefiles(this)" multiple='multiple' />
                        <i class="material-icons" id="attach" style="font-size:21px;color:black">attach_file</i><label>Allegati</label>
                    </div>
                </form>
                <br />
            </div>
            <br />  
            <div>
                <button style="border:none; background-color:white; color:black; display:none" id="seebtn"><p>Files &#9660;</p></button>
                <button style="border:none; background-color:white; color:black; display:none" id="hidebtn"><p>Files &#9650;</p></button>
                <button type="button" class="close" aria-label="Close" id="unselect" style="display:none;float:left">
                    <span style="color:red">&times;</span>
                </button>
                <div id="displayFileNames">
                </div>
                <ul id="myList"></ul>
            </div>

스 니펫 확장

— 밀란 마두 바샤
소스

0

다음은 파일 이름, 레이블 및 사용자 정의 업로드 버튼을 포함하여 빠르고 순수한 CSS 해결 방법입니다 (크롬에서 작동하며 FireFox 폴백 포함). JavaScript가 전혀 필요하지 않습니다! 🎉

참고 : ☝ Chrome에서 작동하며 FireFox 폴 백이 있습니다. 어쨌든 실제 웹 사이트에서는 사용하지 않을 것입니다. 브라우저 호환성이 필요한 경우 (필요한 경우). 더 실험적입니다.

.fileUploadInput {
  display: grid;
  grid-gap: 10px;
  position: relative;
  z-index: 1; }
  
  .fileUploadInput label {
    display: flex;
    align-items: center;
    color: setColor(primary, 0.5);
    background: setColor(white);
    transition: .4s ease;
    font-family: arial, sans-serif;
    font-size: .75em;
    font-weight: regular; }
    
  .fileUploadInput input {
    position: relative;
    z-index: 1;
    padding: 0 gap(m);
    width: 100%;
    height: 50px;
    border: 1px solid #323262;
    border-radius: 3px;
    font-family: arial, sans-serif;
    font-size: 1rem;
    font-weight: regular; }
    .fileUploadInput input[type="file"] {
      padding: 0 gap(m); }
      .fileUploadInput input[type="file"]::-webkit-file-upload-button {
        visibility: hidden;
        margin-left: 10px;
        padding: 0;
        height: 50px;
        width: 0; }
        
  .fileUploadInput button {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50px;
    height: 50px;
    line-height: 0;
    user-select: none;
    color: white;
    background-color: #323262;
    border-radius: 0 3px 3px 0;
    font-family: arial, sans-serif;
    font-size: 1rem;
    font-weight: 800; }
    .fileUploadInput button svg {
      width: auto;
      height: 50%; }

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  border: 0px;
  outline: 0;
  background-repeat: no-repeat;
  appearance: none;
  border-radius: 0;
  vertical-align: middle;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  text-decoration: none;
  list-style: none;
  user-select: text;
  line-height: 1.333em; }

body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background: rgba(66, 50, 98, 0.05); }

.container {
  padding: 25px;
  box-shadow: 0 0 20px rgba(66, 50, 98, 0.35);
  border: 1px solid #eaeaea;
  border-radius: 3px;
  background: white; }

@-moz-document url-prefix() {
.fileUploadInput button{
    display: none
}
}

<!-- Author: Ali Soueidan-->
<!-- Author URI: https//: www.alisoueidan.com-->

<div class="container">
    <div class="fileUploadInput">
    <label>✨ Upload File</label>
    <input type="file" />
    <button>+</button></div>
</div>

스 니펫 확장

— 레이저
소스

-2

다음은 최근 jQuery와 함께 발견 한 한 가지 방법입니다.

HTML 코드 :

<form action="">
    <input type="file" name="file_upload" style="display:none" id="myFile">

    <a onclick="fileUpload()"> Upload a file </a>
</form>

javascript / jQuery 부분의 경우 :

<script>
function fileUpload() {
    $("#myFile").click();
}
</script>

이 예에서는 파일 업로드를 트리거하기 위해 "앵커"태그를 넣었습니다. 원하는 기능으로 대체 할 수 있습니다. "onclick"속성을 적절한 기능으로 설정하십시오.

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

추신 : CDN 또는 다른 소스에서 jQuery를 포함하는 것을 잊지 마십시오

— 아야카시
소스

display: none탭 순서에서 입력을 제거합니다. 사용 <label>(Tympanus로 나타내는 바와 같이하면) 훨씬 더 의미 이하 해키. 또한이 질문은 몇 년 후에 다시 요청되었으며 거기에 훨씬 더 나은 답변이 있습니다 : 파일 업로드 버튼에 대한 브라우저 간 사용자 정의 스타일 .

— Dan Dascalescu