javascript - 输入[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]">

其次，如何阻止从 DOM 中删除输入类型 ['file']？

编辑

这是之前的标记

<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() 没有任何用处。如果您出于任何特定原因不需要它，可以将其删除。

Here's a fiddle