[html] <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/