입력 유형 =“파일”에서 기본 텍스트를 변경 하시겠습니까? ” “인 버튼의 기본 텍스트를 변경하고

Choose File사용할 때 ” “인 버튼의 기본 텍스트를 변경하고 싶습니다 input="file".

여기에 이미지 설명을 입력하십시오

어떻게해야합니까? 또한 이미지에서 볼 수 있듯이 버튼은 텍스트의 왼쪽에 있습니다. 텍스트의 오른쪽에 어떻게 넣을 수 있습니까?

답변

각 브라우저에는 컨트롤에 대한 고유 한 표현이 있으므로 컨트롤의 텍스트 나 방향을 변경할 수 없습니다.

원하는 경우 시도해 볼 수있는 “종류”해킹이 있습니다. html/CSS 플래시보다는 솔루션 또는 은빛해결책.

http://www.quirksmode.org/dom/inputfile.html

http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

개인적으로 대부분의 사용자는 선택한 브라우저를 사용하므로 기본 변환에서 컨트롤을 보는 데 익숙 할 것이므로 처리하는 사용자 유형에 따라 다른 무언가를 보았을 때 혼란 스러울 수 있습니다. .

답변

for의 "for"속성을 사용하십시오 .labelinput

<div>
  <label for="files" class="btn">Select Image</label>
  <input id="files" style="visibility:hidden;" type="file">
</div>

아래는 업로드 된 파일의 이름을 가져 오는 코드입니다.

$("#files").change(function() {
  filename = this.files[0].name
  console.log(filename);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
      <label for="files" class="btn">Select Image</label>
      <input id="files" style="visibility:hidden;" type="file">
    </div>

스 니펫 확장

답변

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

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <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">
</body>

</html>

스 니펫 확장

답변

이것은 나중에 누군가에게 도움이 될 수 있습니다. 원하는대로 입력 레이블의 스타일을 지정하고 원하는 것을 입력하고 표시 없음으로 입력을 숨길 수 있습니다.

iOS로 코르도바에서 완벽하게 작동합니다.

<link href="https://cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/css/ratchet.css" rel="stylesheet"/>
<label for="imageUpload" class="btn btn-primary btn-block btn-outlined">Seleccionar imagenes</label>
<input type="file" id="imageUpload" accept="image/*" style="display: none">

스 니펫 확장

답변

불가능합니다. 그렇지 않으면 Silverlight 또는 Flash 업로드 컨트롤을 사용해야 할 수도 있습니다.

답변

여기 당신이 그것을 할 수있는 방법 :

jQuery를 : 

$(function() {
  $("#labelfile").click(function() {
    $("#imageupl").trigger('click');
  });
})

CSS

.file {
  position: absolute;
  clip: rect(0px, 0px, 0px, 0px);
  display: block;
}
.labelfile {
  color: #333;
  background-color: #fff;
  display: inline-block;
  margin-bottom: 0;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  white-space: nowrap;
  padding: 6px 8px;
  font-size: 14px;
  line-height: 1.42857143;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

HTML 코드 :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="margin-top:4px;">
  <input name="imageupl" type="file" id="imageupl" class="file" />
  <label class="labelfile" id="labelfile"><i class="icon-download-alt"></i> Browse File</label>
</div>

답변

<button class="styleClass" onclick="document.getElementById('getFile').click()">Your text here</button>
<input type='file' id="getFile" style="display:none">

이것은 지금까지 여전히 최고입니다