javascript - 用于重置名称为 "file[]"(数组)的单个文件输入值的按钮

Question

我正在尝试创建一个删除按钮来清除 <input type="file"> 的值。我遇到的问题是我不知道如何使每个按钮指向各自的 <input> .

我正在使用 JQuery 插件 ezdz 上传和创建图像预览，我可以使用 $ezdz 轻松地将按钮添加到每个输入。预定义变量:

$ezdz.parent('div').find('div.arrow_box').html('<p><a href="#" onClick="window.resetMethod($(this.form[\'file[]\']));return false;">Quitar imagen</a></p>');
$ezdz.parent('div').find('div.arrow_box').removeClass('hide');

我需要创建一个函数来重置文件输入:

window.resetMethod = 
function (e) {
      $(this).parent('div').find('input').get(0).reset();
}

但问题出在按钮上......

<a href="#" onClick="window.resetMethod($(this.form[\'file[]\']));return false;">Quitar imagen</a>

这是html代码:

<div class="first">
    <!-- ezdz creates the following div and it'll be the container for the img -->
    <div>Drop a file</div> <!-- This div is $ezdz -->
    <input type="file" name="file[]" accept="image/jpeg" /><div class="arrow_box hide"></div>
</div>

有什么办法可以让它发挥作用吗？

编辑:抱歉，我没有意识到该函数将重置整个表单。我需要重置按钮上方的输入。

我在控制台中收到以下错误:

TypeError: $(...).parent(...).find(...).get(...) is undefined

Answer 1

onClick 处理程序中的

this.form[...] 将失败。我想你的控制台会显示错误。在调用时，this 对应于 anchor 元素 (a)，并且该元素没有 form 属性。

所以替换:

<a href="#" onClick="window.resetMethod($(this.form[\'file[]\']));return false;">Quitar imagen</a>

作者:

<a href="#" onClick="window.resetMethod($(this));return false;">Quitar imagen</a>

函数resetMethod不需要您传递form对象。只要将元素放置在预期的形式中，您就可以将其(作为 jQuery 对象)传递给函数，它会找到该形式并重置它。

resetMethod 函数似乎也存在问题，因为它确实进行了包装。我建议跳过这一部分，只使用 if，如下所示:

window.resetMethod = function (elem) {
    var frm = elem.closest('form');
    if (frm.length) {
        frm.get(0).reset();
    }
    return false; // cancel default
}

由于return false，您可以将onclick部分简化为:

<a href="#" onClick="return resetMethod($(this));">Quitar imagen</a>

您也不需要使用window前缀。

请注意，该函数还将重置您在同一表单中可能拥有的任何其他输入。

如果您只想重置文件上传输入，请使用该函数的此变体:

window.resetMethod = function (elem) {
      frm = elem.closest('form');
      console.log(frm);
      if (frm.length) {
          upload = frm.find('input[type=file]');
          console.log(upload);
          if (upload.length) {
              // clear file-upload by
              // re-injecting the html for it in the dom:
              upload.replaceWith($("<p>").append(upload.clone()).html());
          }
      }
      return false; // cancel default
}