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页面。我知道ajaxForm（）函数不起作用。同样的问题我在SO中问了两次，但仍然没有令人满意的解决方案。但为什么？请帮忙。谢谢。

Answer 1

使用adeneo的答案，因为我也不明白你为什么会使用这个插件，但这可能是你拥有的东西不起作用的几个原因：

在the plugin's website的示例中，您应该

绑定到表单，而不是按钮
使用beforeSubmit选项
从通话结束时删除提交（），不知道为什么会这样有
观察控制台是否有任何错误

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);
});

jquery表单插件不起作用

1 个答案: