"선택된 파일 없음"을 변경합니다.

"선택된 파일 없음"을 변경합니다.

---

다음과 같이 "파일 선택"버튼이 있습니다 (Jade를 사용하고 있지만 Html5와 동일해야합니다).

 input(type='file', name='videoFile')

브라우저에서 "선택한 파일 없음"옆에 텍스트가있는 버튼이 표시됩니다. "선택한 파일 없음"텍스트를 "선택한 동영상 없음"또는 "동영상을 선택하십시오"와 같은 다른 것으로 변경하고 싶습니다. 여기에서 첫 번째 제안을 따랐습니다.

파일 입력 필드에 '선택된 파일 없음'을보고 싶지 않습니다.

그러나 이렇게해도 텍스트는 변경되지 않았습니다.

 input(type='file', name='videoFile', title = "Choose a video please")

아무도 문제가 어디에 있는지 알아낼 수 있습니까?

---

버튼의 기본 레이블을 변경할 수 없다고 확신합니다. 브라우저에서 하드 코딩되어 있습니다 (각 브라우저에서 버튼 캡션을 고유 한 방식으로 렌더링). 이 버튼 스타일링 기사를 확인 하십시오.

---

CSS로 입력을 숨기고 레이블을 추가하고 입력 버튼에 할당합니다. 레이블을 클릭 할 수 있으며 클릭하면 파일 대화 상자가 나타납니다.

<input type="file" id="files" class="hidden"/>
<label for="files">Select file</label>

그런 다음 원하는 경우 레이블 스타일을 단추로 지정하십시오.

---

http://jsfiddle.net/ZDgRG/

위의 링크를 참조하십시오. CSS를 사용하여 기본 텍스트를 숨기고 레이블을 사용하여 원하는 것을 표시합니다.

<div><input type='file' title="Choose a video please" id="aa" onchange="pressed()"><label id="fileLabel">Choose file</label></div>

input[type=file]{
    width:90px;
    color:transparent;
}

window.pressed = function(){
    var a = document.getElementById('aa');
    if(a.value == "")
    {
        fileLabel.innerHTML = "Choose file";
    }
    else
    {
        var theSplit = a.value.split('\\');
        fileLabel.innerHTML = theSplit[theSplit.length-1];
    }
};

---

이것은 단지 트릭을 시도하십시오

<input type="file" name="uploadfile" id="img" style="display:none;"/>
<label for="img">Click me to upload image</label>

작동 원리

아주 간단합니다. Label 요소는 "for"태그를 사용하여 양식의 요소를 id로 참조합니다. 이 경우 "img"를 참조 키로 사용했습니다. 완료되면 레이블을 클릭 할 때마다 자동으로 양식의 요소 클릭 이벤트 (이 경우 파일 요소 클릭 이벤트)가 트리거됩니다. 그런 다음 빈 공간을 만들지 않도록 display : none이 아닌 visible : hidden을 사용하여 파일 요소를 보이지 않게 만듭니다.

코딩 즐기기

---

맞습니다. 사전 업로드 파일 목록이 있어도 '선택한 파일 없음'을 제거 할 방법이 없습니다.

내가 찾은 (그리고 IE, FF, CR에서 작동하는) 가장 간단한 솔루션은 다음과 같습니다.

1. 입력 내용을 숨기고 '파일'버튼 추가
2. 그런 다음 '파일'버튼을 호출하고 파일 업로드를 바인딩하도록 요청합니다 (이 예제에서는 JQuery를 사용하고 있습니다).

$('.addfiles').on('click', function() { $('#fileupload').click();return false;});

<button class="addfiles">Add Files</button>
<input id="fileupload" type="file" name="files[]" multiple style='display: none;'>

완료, 완벽하게 작동합니다. :)

프레드

---

$(function () {
     $('input[type="file"]').change(function () {
          if ($(this).val() != "") {
                 $(this).css('color', '#333');
          }else{
                 $(this).css('color', 'transparent');
          }
     });
})

input[type="file"]{
    color: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" name="app_cvupload" class="fullwidth input rqd">

---

하지만이 툴팁을 제거하려고하면

<input type='file' title=""/>

이것은 작동하지 않습니다. 이 작업을 수행하는 작은 트릭은 다음과 같습니다. 공백으로 제목을 시도하십시오. 작동합니다. :)

<input type='file' title=" "/>

---

이런 식으로 작동 할 수 있습니다.

input(type='file', name='videoFile', value = "Choose a video please")

---

 .vendor_logo_hide{
      display: inline !important;;
      color: transparent;
      width: 99px;
    }
    .vendor_logo{
      display: block !important;
      color: black;
      width: 100%; 
    }

$(document).ready(function() {
  // set text to select company logo 
  $("#Uploadfile").after("<span class='file_placeholder'>Select Company Logo</span>");
  // on change
  $('#Uploadfile').change(function() {
    //  show file name 
    if ($("#Uploadfile").val().length > 0) {
      $(".file_placeholder").empty();
      $('#Uploadfile').removeClass('vendor_logo_hide').addClass('vendor_logo');
      console.log($("#Uploadfile").val());
    } else {
      // show select company logo
      $('#Uploadfile').removeClass('vendor_logo').addClass('vendor_logo_hide');
      $("#Uploadfile").after("<span class='file_placeholder'>Select  Company Logo</span>");
    }

  });

});

.vendor_logo_hide {
  display: inline !important;
  ;
  color: transparent;
  width: 99px;
}

.vendor_logo {
  display: block !important;
  color: black;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<input type="file" class="vendor_logo_hide" name="v_logo" id='Uploadfile'>
<span class="fa fa-picture-o form-control-feedback"></span>

<div>
  <p>Here defualt no choose file is set to select company logo. if File is selected then it will displays file name</p>
</div>

---

HTML

  <div class="fileUpload btn btn-primary">
    <label class="upload">
      <input name='Image' type="file"/>
    Upload Image
    </label>
  </div>

CSS

input[type="file"]
{
  display: none;
}
.fileUpload input.upload 
{
    display: inline-block;
}

참고 : Btn btn-primary는 부트 스트랩 버튼의 클래스입니다. 그러나 버튼의 위치가 이상하게 보일 수 있습니다. 인라인 CSS로 해결할 수 있기를 바랍니다.

---

<div class="field">
    <label class="field-label" for="photo">Your photo</label>
    <input class="field-input" type="file" name="photo"  id="photo" value="photo" />
</div>

그리고 CSS

input[type="file"]
{ 
   color: transparent; 
   background-color: #F89406; 
   border: 2px solid #34495e; 
   width: 100%; 
   height: 36px; 
   border-radius: 3px; 
}

---

이 방법으로 시도 할 수 있습니다.

<div>
    <label for="user_audio" class="customform-control">Browse Computer</label>
    <input type='file' placeholder="Browse computer" id="user_audio"> <span id='val'></span>
 <span id='button'>Select File</span>
</div>

선택한 파일을 표시하려면 :

$('#button').click(function () {
    $("input[type='file']").trigger('click');
})

$("input[type='file']").change(function () {
    $('#val').text(this.value.replace(/C:\\fakepath\\/i, ''))
    $('.customform-control').hide();
})

선택한 파일 이름을 얻은 @ unlucky13에게 감사드립니다.

다음은 작동하는 바이올린입니다.

http://jsfiddle.net/eamrmoc7/

---

Just change the width of the input. Around 90px

<input type="file" style="width: 90px" />

---

using label with label text changed

<input type="file" id="files" name="files" class="hidden"/>
<label for="files" id="lable_file">Select file</label>

add jquery

<script>
     $("#files").change(function(){
        $("#lable_file").html($(this).val().split("\\").splice(-1,1)[0] || "Select file");     
     });
</script>

---

This will help you to change the name for "no file choose to Select profile picture"

<input type='file'id="files" class="hidden"/>  
<label for="files">Select profile picture</label>

---

I would use "button" instead of "label", hope this help someone.

This will just display a button, user clicked will popup file chooser, after file chose, automatically upload.

<button onclick='<%= "$(\"#" + FileUpload1.ClientID + "\").click(); return false;" %>'>The Text You Want</button>

<asp:FileUpload onchange="$('#btnUpload').click();" ID="FileUpload1" runat="server" style="display: none;" />

<asp:Button ID="btnUpload" ClientIDMode="Static" runat="server" OnClick="btnUpload_Click" style="display: none;" />

참고URL : https://stackoverflow.com/questions/16001586/change-the-no-file-chosen