輸入[type='file'] 標簽名稱

Question

我正在嘗試修改我已經完成的 input[type='file'] 元素的外觀，

<div class="own_image_wrapper">
  <%= f.label :image, id: 'own-image-label', class: 'lato-font fileContainer image_button' do %>
  Choose Your Own
  <%= f.file_field :image %>
 <% end %>
</div>

CSS

.fileContainer {
  overflow: hidden;
  position: relative;
}

.fileContainer input[type='file'] {
  cursor: inherit;
  display: block;
  font-size: 999px;
  filter: alpha(opacity=0);
  min-height: 100%;
  min-width: 100%;
  opacity: 0;
  position: absolute;
  right: 0;
  text-align: right;
  top: 0;
}

.image_button{
  padding:15px;
  color:$white;
  background:$blue;
  text-transform:uppercase;
}

我的下一階段是在用戶選擇文件后更改標簽文本，我的第一個問題是事件並不總是觸發，留下一個沒有內容的按鈕。

$(document).ready( function() {
// Update Choose your own image label with file name
$( '#own-image-label [type=file]' ).on( 'click', function (){
  var $input = $( this );

  setTimeout( function (){
     $input.parent().text( $input.val().replace(/([^\\]*\\)*/,'') )
   }, 0 )
  } );

});

當它觸發時，我無法再單擊輸入，因為以下內容已從 DOM 中刪除：

<input id="campaign_image" type="file" name="campaign[image]">

其次，如何阻止輸入類型 ['file'] 從 DOM 中刪除？

編輯

這是之前的標記

<label id="own-image-label" class="lato-font fileContainer image_button" for="campaign_image">
  Choose Your Own
  <input id="campaign_image" type="file" name="campaign[image]">
</label>

然后如果我選擇一個名為 myfile.jpg 的文件，這就是標記

<label id="own-image-label" class="lato-font fileContainer image_button" for="campaign_image">myfile.jpg</label>

Answer 1

當您設置label的文本時，它會覆蓋其當前內容。 您需要定位文本節點本身，並設置其值：

this.parentNode.childNodes[0].nodeValue = $input.val().replace(/([^\\]*\\)*/,'');

在嘗試附加處理程序之前，您必須確保 DOM 已准備好，否則可能無法附加。 此外，在我看來，您的setTimeout()沒有任何用途。 如果出於任何特定原因不需要它，則可以將其刪除。

這是一把小提琴