ajax - jquery表单插件不起作用

Question

我编写了一个代码，将表单提交到另一个页面而不像 ajax 那样加载。我使用 jquery 表单插件。但问题是它不起作用。这是我的代码

<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() 函数不起作用。jquery 文件在代码上方并且工作正常。单击按钮页面后自动重定向到 ajaxcall.php 页面。请帮助我找出错误。提前致谢。

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

尝试在单击之前停止提交。