Question

我正在尝试修改输入的[type =＆＃39; file＆＃39;]元素的外观，

<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]">

其次，如何阻止输入类型[＆＃39;文件＆＃39;]从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()用于任何目的那样。如果您因任何特定原因不需要它，可以将其删除。

输入[type ='file']标签名称

1 个答案:

Here's a fiddle