jquery form插件不起作用

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.I明白，給ajaxForm （）函數不起作用。同樣的問題，我在SO問了兩次，但仍然沒有令人滿意的解決方案。但爲什麼？請幫助。提前感謝。

Answer 1

使用adeneo的答案，因爲我還沒有看到你爲什麼會用這個插件，但這裏可能是幾個原因，你有沒有什麼地方努力：

在這些例子中，從the plugin's website，你應該

1. 結合的形式，而不是按鈕
2. 使用beforeSubmit選項
3. 從您的通話結束時刪除提交（），不知道爲什麼它是 有
4. 觀察控制檯的任何錯誤

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