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

Html / 글쓴이 
<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/