单击“X”按钮时删除占位符输入文件名，并显示默认输入字段文本答案

【问题标题】：Remove placehoder input file name when click on "X" button, and display default input field text单击“X”按钮时删除占位符输入文件名，并显示默认输入字段文本
【发布时间】：2017-03-16 09:32:20
【问题描述】：

当我点击上传图标时，我可以选择附件文件，然后我得到，带有“X”删除附件按钮（@extend .icon-cross; in sass）。当我点击 X 删除附件按钮时，我想实现返回默认输入字段文本（上传字段）而不是附加文件名（在这种情况下例如 asdf.txt）

export default function File(sandbox, hub) {

  'use strict';


  let $file = $('input.input-file-hidden');

  /**
   * onChange event handler
   * @function onChange
   * @private
   */
  function onChange() {
    let $placeholder = $('span.input-file-placeholder', $(this).closest('div.input-file'));
    $placeholder.text(
      $(this)[0].files[0].name);
    $placeholder.parent().addClass('filled');
  }


  return {
    /**
     * initialize File
     */
    init() {
      $file.on('change', onChange);
      hub.on('inputfile:init', components => {
        components.forEach(function(component) {
          $(component).find('input.input-file-hidden').on('change', onChange);
        });
      });
    }
  }
}

&.filled {
  .input-file-button .icon {
    position: relative;
    top: -4px;
    left: -2px;
    font-size: 15px;
    @extend .icon-cross;
    @include breakpoint(phone) {
      font-size: 24px;
    }
  }
}

<div class="col-xs-12 col-md-2 no-gutter-right">
  <div class="form-elements-label">Normal</div>
  <div class="input-file input-file--with-icon">
    <label class="text-hide" for="f405">Upload field<sup>*</sup></label>
    <input class="input-file-hidden" type="file" required data-max-size="10485760" data-max-size-error-text="* File size is too large">
    <input class="input-file-elem" type="text" id="f405">
    <span class="input-file-placeholder">Upload field<sup>*</sup></span>
    <span class="input-file-bg">input background</span>
    <span class="input-file-button"><span class="icon icon-download"></span></span>
    <div class="input-file-additional-info text-right">
      <span class="additional-info-text">* JPG, PNG (max 10Mb)</span>
      <span class="error-text"></span>
    </div>
  </div>
</div>

到目前为止我在尝试什么，在 JS 添加（单击 X 时使用 .val('')，我将值从“文件名，asdf.txt”更改为“未选择文件” 作为将鼠标悬停在输入字段上的标题），但我需要将输入字段名称更改为默认输入字段文本“上传字段”：

let $remove = $('.input-file input-file--with-icon.filled .icon-download');
remove.on("click", function () {
        $placeholder.val('');
    });

【问题讨论】：

我认为您需要在 remove 函数中调用 $('.input-file').val('');，然后占位符应该会自动更改。此外，您的 jQuery 选择器错误，您缺少 input-file--with-icon 类的点 (.)：$('.input-file.input-file--with-icon')。
不幸的是，不起作用，因为不会再次删除输入文件名，而是将文件值从名称 asdf.txt 输入到未选择文件

标签： javascript jquery

【解决方案1】：

您只需重置文件输入字段的值，然后占位符应相应更新。

$('.input-file-hidden').val('');

【讨论】：

Uncaught TypeError: Cannot read property 'name' of undefined... $remove.on("click", function () { $('.input-file-hidden').val(' '); }); } 不会再次删除输入文件名，而是从名称到未选择文件的值。你能帮帮我吗？
该错误意味着您正在尝试访问不存在的名称。但是对于“未选择文件”部分，您需要在删除块中添加 $('.input-file-placeholder').html('Upload field<sup>*</sup>') 手动重置它。
好的，如何摆脱这个错误。什么都不起作用，因为我有那个错误
用if($(this)[0].files.length>0){$placeholder.text( $(this)[0].files[0].name);}替换$placeholder.text($(this)[0].files[0].name);
太好了，谢谢彼得，没有更多的错误消息...如果你能帮助我，如果没有，没关系。情况是 - 当我单击删除 X 按钮时，输入文件名不会消失，而是打开框再次选择文件（如上传）。我认为问题出在点击事件上，因为当我在 $remove.on("click", function () { $placeholder.html('Upload field^*' ) }); ，没有任何反应，没有警报消息

【解决方案2】：

我找到了解决方案，就像一个魅力，@Peter 部分帮助了我他的建议

function onChange() {
  let $placeholder = $('span.input-file-placeholder', $(this).closest('div.input-file'));

  if ($(this)[0].files.length > 0) {
    $placeholder.text($(this)[0].files[0].name)
  }

  $placeholder.parent().addClass('filled');

  let $remove = $('.input-file.input-file--with-icon.filled .input-file-button .icon.icon-download');

  $remove.on('click', function() {
    $placeholder.html('Upload field<sup>*</sup>');
    $file.val('');
    $placeholder.parent().removeClass('filled');
  });
}

【讨论】：