<input type =“file”/>의 버튼 텍스트를 변경하는 방법은 무엇입니까?

<input type="file" value="Browse" name="avatar" id="id_avatar" />

을 수정하려고 시도했지만 value작동하지 않습니다. 버튼 텍스트를 사용자 정의하는 방법은 무엇입니까?

양식의 파일 필드 스타일을 지정하는 데 사용되는 Bootstrap FileStyle을 사용하십시오 . Twitter Bootstrap이라는 jQuery 기반 컴포넌트 라이브러리 용 플러그인입니다.

샘플 사용법 :

포함:

<script type="text/javascript" src="js/bootstrap-filestyle.min.js"> </script>

자바 스크립트를 통해 :

$(":file").filestyle();

데이터 속성을 통해 :

<input type="file" class="filestyle" data-classButton="btn btn-primary" data-input="false" data-classIcon="icon-plus" data-buttonText="Your label here.">

대신 이미지를 넣고 다음과 같이 할 수 있습니다.

HTML :

<img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" />
<input type="file" id="file1"  name="file1" style="display:none" />

jQuery :

$("#upfile1").click(function () {
    $("#file1").trigger('click');
});

주의 사항 : IE9 및 IE10에서 javascript를 통해 파일 입력에서 onClick을 트리거하면 양식이 '위험한'으로 플래그 지정되고 Javascript로 제출 할 수 없으며 전통적으로 제출할 수 있는지 확실하지 않습니다.

파일 입력을 숨 깁니다. 클릭 이벤트를 캡처하여 숨겨진 입력으로 전달할 새 입력을 작성하십시오.

<input type="button" id="loadFileXml" value="loadXml" onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file"/>

"파일 업로드 ..."텍스트는 브라우저에 의해 미리 정의되어 있으며 변경할 수 없습니다. 이 문제를 해결하는 유일한 방법은 swfupload 와 같은 Flash 또는 Java 기반 업로드 구성 요소를 사용하는 것 입니다.

작동 모든 브라우저에서 완벽하게 너무 당신을 위해 작동 바랍니다.

HTML :
<input type="file" class="custom-file-input">

CSS :

 .custom-file-input::-webkit-file-upload-button {
  visibility: hidden;
}
.custom-file-input::before {
  content: 'Select some files';
  display: inline-block;
  background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
  border: 1px solid #999;
  border-radius: 3px;
  padding: 5px 8px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  text-shadow: 1px 1px #fff;
  font-weight: 700;
  font-size: 10pt;
}
.custom-file-input:hover::before {
  border-color: black;
}
.custom-file-input:active::before {
  background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}

content: 'Select some files';원하는 텍스트로 변경''

firefox로 작업하지 않으면 입력 대신 다음을 사용하십시오.

<label class="custom-file-input" for="Upload" >
</label>

<input id="Upload" type="file" multiple="multiple" name="_photos" accept="image/*" style="visibility: hidden">

이 입력 파일 요소의 버튼 텍스트를 변경하는 플러그인 JQuery와있다.

HTML 예 :

<input type="file" id="choose-file" />

JS 예 :

$('#choose-file').inputFileText({
    text: 'Select File'
});

결과:

<input id="uploadFile" placeholder="Choose File" disabled="disabled" />
<div class="fileUpload btn btn-primary">
    <span>Your name</span>
    <input id="uploadBtn" type="file" class="upload" />
</div>

JS

document.getElementById("uploadBtn").onchange = function () {
    document.getElementById("uploadFile").value = this.value;
 };

더 http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/

간단히

<label class="btn btn-primary">
  <i class="fa fa-image"></i> Your text here<input type="file" style="display: none;"  name="image">
</label>

[스 니펫으로 편집]

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

<label class="btn btn-primary">
<i class="fa fa-image"></i> Your text here<input type="file" style="display: none;" name="image">
</label>

나는 이것이 당신이 원하는 것이라고 생각합니다.

<button style="display:block;width:120px; height:30px;" onclick="document.getElementById('getFile').click()">Your text here</button>


<input type='file' id="getFile" style="display:none"> 

편집 : 이제 파일 경로가 아닌 버튼 텍스트에 대해 묻는 주석으로 볼 수 있습니다. 내 잘못이야. 이 질문을 우연히 발견 한 다른 사람이 내가 원래했던 방식으로 해석하는 경우를 대비하여 원래 답변을 아래에 남겨 두겠습니다.

2 차 편집 : 질문을 오해하기로 결정하고 답변이 관련이 없기 때문에이 답변을 삭제했습니다. 그러나 다른 답변의 의견에 따르면 사람들은 여전히이 답변을보고 싶어서 삭제하지 않습니다.

내 원래 답변 (OP가 버튼 텍스트가 아닌 경로에 대해 묻는다고 생각했습니다) :

보안상의 이유로 지원되는 기능이 아닙니다 . Opera 웹 브라우저가이를 지원했지만 제거되었습니다. 이것이 지원된다면 무엇이 가능한지 생각해보십시오. 파일 업로드 입력으로 페이지를 작성하고 민감한 파일의 경로로 미리 채우고 onload이벤트 에 의해 트리거되는 javascript를 사용하여 양식을 자동 제출할 수 있습니다. 이것은 사용자가 그것에 대해 무언가를하기에는 너무 빠릅니다.

사용 <label>캡션에 대한

<form enctype='multipart/form-data' action='/uploads.php' method=post>
<label for=b1>
    <u>Your</u> caption here
<input style='width:0px' type=file name=upfile id=b1
 onchange='optionalExtraProcessing(b1.files[0])'
 accept='image/png'>
</label>
</form>

이것은 자바 스크립트없이 작동 합니다 . 라벨을 마음의 내용에 따라 어느 정도의 복잡도로 꾸밀 수 있습니다. 레이블을 클릭하면 클릭이 자동으로 파일 입력으로 리디렉션됩니다. 파일 입력 자체는 어떤 방법으로도 보이지 않게 할 수 있습니다. 레이블을 버튼처럼 보이게하려면 다음과 같은 여러 가지 해결책이 있습니다.

label u {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

CSS 및 부트 스트랩 클래스 만

        <div class="col-md-4 input-group">
            <input class="form-control" type="text"/>
            <div class="input-group-btn">
                <label for="files" class="btn btn-default">browse</label>
                <input id="files" type="file" class="btn btn-default"  style="visibility:hidden;"/>
            </div>
        </div>

1. 그 전에 <input type="file">이미지를 추가하면 이미지 <input style="position:absolute">의 공간을 차지합니다.<input type="file">

2. 파일 요소에 다음 CSS를 사용하십시오.

   position:relative;  
   opacity:0;  
   z-index:99;

레일을 사용하고 문제가 발생하면 @Fernando Kosh가 게시 한 원래 답변의 팁을 추가하고 싶습니다.

• 파일 zip 다운로드 및 파일 복사 bootstrap-filestyle.min.js ke 폴더 app / assets / javascripts /

• application.js를 열고 아래에이 줄을 추가하십시오

  // = 부트 스트랩 파일 스타일 필요

• 커피를 열고이 줄을 추가하십시오

  $ ( ": file"). filestyle ({buttonName : "btn-primary", buttonBefore : true, buttonText : "여기에있는 텍스트", 아이콘 : false});

CSS 트릭을 간단히 추가 할 수 있습니다. 당신은 자바 스크립트가 필요하지 않습니다 이상의 입력 파일을 그리고 난 계속 기존 값 속성을 . css 만 추가하면 됩니다 . 이 솔루션을 사용해 볼 수 있습니다.

.btn-file-upload{
     width: 187px;
     position:relative;
 }

.btn-file-upload:after{
    content:  attr(value);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;    
    width: 48%;
    background: #795548;
    color: white;
    border-radius: 2px;
    text-align: center;
    font-size: 12px;
    line-height: 2;
 }

<input type="file" class="btn-file-upload" value="Uploadfile" />

다음은 순수한 HTML 및 자바 스크립트를 사용하여 파일 형식의 입력 텍스트를 "변경"하는 방법입니다.

<input id='browse' type='file' style='width:0px'>
<button id='browser' onclick='browse.click()'>
    *The text you want*
</button>

나를 위해 bootstrap-filestyle 사용하여 사용자 정의 텍스트를 작동하지 않습니다 . 그것은 버튼 장식에 도움이되지만 CSS로 레슬링하기 전에 텍스트가 이상하게 변경되어 다음을 시도합니다.

$( document ).ready(function() {
   $('.buttonText').html('Seleccione ficheros');
});

bootstrap-filestyle은 butonText라는 클래스를 사용하여 구성 요소를 span으로 렌더링하므로 문서를로드 할 때 텍스트 만 변경하면됩니다. 쉬운 일이며 모든 브라우저에서 작동해야합니다.

건배

내 프로젝트에서 이와 같이했습니다.

.btn-outlined.btn-primary {
  color: #000;
}
.btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active {
  color:#000;
}
.btn-block {
  display: block;
  width: 100%;
  padding: 15px 0;
  margin-bottom: 10px;
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

<label for="fileUpload" class="btn btn-primary btn-block btn-outlined">Your text</label>
<input type="file" id="fileUpload"style="display: none;">

이것은 당신에게 도움이 될 수있는 대체 솔루션입니다. 버튼에 나타나는 텍스트를 숨기고 div의 배경색과 혼합합니다. 그런 다음 div에 원하는 제목을 줄 수 있습니다.

<div style="padding:10px;font-weight:bolder; background-color:#446655;color: white;margin-top:10px;width:112px;overflow: hidden;">
     UPLOAD IMAGE <input style="width:100px;color:#446655;display: inline;" type="file"  />
</div>