jquery表单插件不工作

我是一个新手程序员。我被一个简单的编码问题困扰了两天。我尝试使用jquery表单插件将表单提交到另一个页面，并从该页面获得反馈。问题是插件不起作用，表单在没有反馈的情况下正常提交。代码如下：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
<script src="http://malsup.github.com/jquery.form.js"></script>

<div id='preview'></div>
<form  action='ajaxcall.php' id='upload_pic' enctype='multipart/form-data'  method='post'>
<input type='file' id='pic' name='picture'>
<input type='submit' id='sub'>
</form>

var options=
{
  target:'#preview',
  url:'ajaxcall.php'
};

$(document).ready(function(){
    $("#sub").click(function(){
        $('#preview').html("<img src='images/loader.gif' alt='Loading.....'/>");
        $('#upload_pic').ajaxForm(options).submit();
    });
});

var期权=
{
目标：“#预览”，
url:'ajaxcall.php'
};
$（文档）.ready（函数（）{
$（“#子”）。单击（函数（）{
$（“#预览”）.html（“”）；
$（'#upload_pic'）.ajaxForm（选项）.submit（）；
});
});

下面是我的ajaxcall.php页面代码

if(!empty($_FILES['picture']['size']))
{
 echo "<img src='images/197.jpg'>";
}

if（！空（$\u文件['picture']['size']））
{
回声“；
}

---

期望得到的是回音图像会得到反馈，但页面只是重定向到ajaxcall.php页面。我知道ajaxForm（）函数不起作用。同样的问题，我问了两次，但仍然没有令人满意的解决办法。但是为什么呢？请帮助。提前感谢。

请使用adeneo的答案，因为我也不明白您为什么会使用此插件，但以下可能是您的插件无法正常工作的一些原因：

在中的示例中，您应该

绑定到窗体，而不是按钮

使用beforeSubmit选项

从调用结束时删除submit（），但不确定原因 那里

观察控制台是否有任何错误

var选项=
{
目标：“#预览”，
url:'ajaxcall.php'，
提交前：显示加载，
错误：函数（e）{
警报（“错误：+e”）；
}
};
函数showLoading（）{
$（“#预览”）.html（“”）；
}
$（文档）.ready（函数（）{
$（“#上传图片”）.ajaxForm（可选）；
});

---

错误可能是服务器端更好的“验证程序”，而不是大小。请帮助。如果您的代码工作，我的代码将工作。问题是什么。感到绝望…我更新了答案，但您真的应该使用adeneo的答案。如果你不能让它工作，那么你也不能让它工作。你需要排除出什么问题，我们很难猜测。使用控制台、调试器和警报找出哪里出了问题。

var options=
{
  target:'#preview',
  url:'ajaxcall.php',
  beforeSubmit:  showLoading,
  error: function(e){
      alert("Error: " + e);
  }
};

function showLoading(){
    $('#preview').html("<img src='images/loader.gif' alt='Loading.....'/>");
}

$(document).ready(function(){
    $("#upload_pic").ajaxForm(options);
});