ajax - jquery表单插件不起作用

Question

我是一个新手程序员。我被一个简单的代码困了两天。我尝试使用 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();
    });
});

这是我的 ajaxcall.php 页面代码

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

 }

期望是回显图像会反馈，但页面只是重定向到 ajaxcall.php page.ajaxForm() 函数不起作用。但是为什么？请帮助。提前致谢。

Answer 1

只需将您的提交按钮替换为普通按钮，因为您已经从单击处理程序以编程方式提交表单，因此请替换以下 html：

<input type='submit' id='sub'>

对于这个：

<input type='button' id='sub'>

Answer 2

使用这些代码而不是您的脚本代码。抱歉回复晚了

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

    });
});