Question

当我尝试提交带有文件的表单时，当上传文件在选择之后但在提交表单之前发生了更改（例如重命名文件）时，我遇到了问题。表单根本不提交。这是我的示例代码：

<form action="test.htm" method="post" enctype="multipart/form-data" id="test">
    <input type="file" name="file" />
    <input type="submit" value="Submit" />
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('#test').submit(function() {
        console.log("IT WORKS!");
        return true;
    });
});
</script>

更新

使用此代码更简化：

<form action="upload.asp" method="post" enctype="multipart/form-data">
    <input type="file" name="file" />
    <input type="submit" value="Submit" />
</form>

尝试执行以下操作：1）从系统中选择文件2）在系统上重命名文件3）提交表单。

什么都没发生。

Answer 1

如果您想知道为什么console.log没有显示，那是因为表单已经提交。

只需添加event.preventDefault即可确保代码运行。

$(document).ready(function() {
    $('#test').submit(function(e) {
        e.preventDefault();
        console.log("IT WORKS!");
        return true;
    });
});

DEMO

<强>更新

您的操作路径是.htm文件。您需要一种服务器端语言来处理POST。

Answer 2

你的javascsript函数是没用的..因为

<input type="submit"..

在调用之前已经提交了表单

一种方法是在你的函数中使用preventDefault() ..

$(document).ready(function() {
 $('#test').submit(function(e) {
    e.preventDefault();
    console.log("IT WORKS!");
    return true;
 });
});

或将输入设为按钮

<button id="submit">Submit</button>

$('#submit').click(function(){
$('#test').submit(function() {
   console.log("IT WORKS!");
   return true;
 });
});

如果缺少上传文件，则表单不提交

2 个答案: