jquery表单插件不起作用

Question

我写了一段代码，在不加载的情况下向另一个页面提交表单，我使用的是jquery表单plugin.but，问题是它不能工作。以下是我的代码

<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='button' id='sub'>
</form>
<script type="text/javascript" src='jqueryform.js'></script>
<script>
var options=
{
 target:'#preview',
 url:'ajaxcall.php',
 success:function(){

document.getElementById("upload_pic").reset();
}
};

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

我知道ajaxForm()函数不是working.the的，jquery文件上面的代码和工作fine.After点击按钮页面会自动跳转到ajaxcall.php page.please帮助我提前找到error.Thanks。

Answer 1

在这种情况下，您需要使用ajaxSubmit

$(document).ready(function() {
    var options = {
        target : '#preview',
        url : 'ajaxcall.php',
        success : function() {
            document.getElementById("upload_pic").reset();
        }
    };

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

Answer 2

再添加一个提交函数：

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

尝试在单击前停止提交。