Question

我在页面上有几个动态表单，每个表单都有一个文件输入...如何在javascript中使用$（this）定位正确的文件输入？

这是我的表格

<form enctype="multipart/form-data" action="category_manage.php" method="post">
<div class="plus-button-container">
    <input id="upfile" name="photo" type="file" onchange="submitFormAfterImageCheck();"/>
</div>
<input type="hidden" name="sml_image" value="sml_image" />
</form>

这是我的javascript函数

function submitFormAfterImageCheck() {
    var formSubmit = $(this).closest("form");
    var file = $(this).closest('input[type=file]').val();
    alert(file);
}
//gives me undefined

我也试过这个，但只适用于第一种形式...

function submitFormAfterImageCheck() {
    var formSubmit = $(this).closest("form");
    var file = $('input[type=file]').val();
    alert(file);
}

我想我需要这样的东西，但这给了我未定义的

var file = $(this).find('input[type=file]').val();

Answer 1

由于您有一个内联事件处理程序，因此事件处理程序this内部不会引用已更改的元素。

一个简单的解决方案是将更改的元素作为参数传递给事件处理程序，如

<input id="upfile" name="photo" type="file" onchange="submitFormAfterImageCheck(this);"/>

然后

function submitFormAfterImageCheck(el) {
    var formSubmit = $(el).closest("form");
    var file = $(el).val();
    alert(file);
}

注意：由于您使用的是jQuery，最好使用基于jQuery的事件处理程序而不是内联的

Answer 2

您拥有它的方式submitFormAfterImageCheck正在使用全局对象（窗口）作为this执行。
我建议用jQuery事件处理程序将代码逻辑与标记分开。

<form enctype="multipart/form-data" action="category_manage.php" method="post">
<div class="plus-button-container">
    <input id="upfile" name="photo" type="file" onchange="submitFormAfterImageCheck();"/>
</div>
<input type="hidden" name="sml_image" value="sml_image" />
</form>
<script>
function submitFormAfterImageCheck() {
    var formSubmit = $(this).closest("form");
    var file = $(this).val();
    alert(file);
}
$('input[type="file"]').on('change', submitFormAfterImageCheck);
</script>

Answer 3

<input id="upfile" name="photo" type="file" onchange="submitFormAfterImageCheck(this);"/>

和：

function submitFormAfterImageCheck(source) { 
    alert($(source).val());
}

无法使用javascript在页面上使用多个表单来定位输入[type = file]

3 个答案: