jquery 表单未按预期工作。ajaxForm 不是函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18614240/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery form not working as expected. ajaxForm is not a function
提问by Beniamin Szabo
I am trying to use jquery form but it sais in the concole ajaxForm is not a function. The jquery.form.js is properly included and the code is in a document ready function...
我正在尝试使用 jquery 表单，但它在 concole ajaxForm 不是一个函数。jquery.form.js 已正确包含并且代码位于文档就绪函数中...
This is the script:
这是脚本：
$("#apply-form").ajaxForm({
beforeSend: function()
{
$("#progress").show();
//clear everything
$("#bar").width('0%');
$("#message").html("");
$("#percent").html("0%");
},
uploadProgress: function(event, position, total, percentComplete)
{
$("#bar").width(percentComplete+'%');
$("#percent").html(percentComplete+'%');
},
success: function()
{
$("#bar").width('100%');
$("#percent").html('100%');
},
complete: function(response)
{
$("#message").html("<font color='green'>"+response.responseText+"</font>");
},
error: function()
{
$("#message").html("<font color='red'> ERROR: unable to upload files</font>");
}
});
And here is the HTML form
这是 HTML 表单
<form id="apply-form" enctype="multipart/form-data" method="post" action="">
<table>
<tr><td>CV:</td>
<td>
<input type="file" name="cover">
</td>
</tr>
<tr><td>Cover Letter:</td>
<td>
<input type="file" name="curriculum">
</td>
</tr>
<tr>
<td colspan="2">
<div id="progress">
<div id="bar"></div>
<div id="percent">0%</div >
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div id="message"></div>
</td>
</tr>
</table>
</form>
i am making the site in codeigniter and i have a header template that is included o every page. and in the head section i am including all my scripts in this order:
我正在使用 codeigniter 制作网站，并且每个页面都包含一个标题模板。在 head 部分，我按以下顺序包含所有脚本：
<script src="/jobs/public/js/jquery.js"></script>
<script src="/jobs/public/js/jquery.form.js"></script>
<script src="/jobs/public/js/javascript.js"></script>
<link href="/jobs/public/js/jquery-ui-1.10.3.custom/css/custom-theme/jquery-ui-1.10.3.custom.css" rel="stylesheet">
<script src="/jobs/public/js/jquery-ui-1.10.3.custom/js/jquery-1.9.1.js"></script>
<script src="/jobs/public/js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>
I am also using jQuery UI. Could that be the problem?
我也在使用 jQuery UI。这可能是问题吗？
回答by Explosion Pills
You are loading jQuery twice. The second loading of jQuery overrides the first and clobbers any plugins.
您正在加载 jQuery 两次。jQuery 的第二次加载会覆盖第一次并破坏任何插件。
<script src="/jobs/public/js/jquery.js"></script>
<script src="/jobs/public/js/jquery.form.js"></script>
...
<script src="/jobs/public/js/jquery-ui-1.10.3.custom/js/jquery-1.9.1.js"></script>
It is this second jquery-1.9.1that is not getting .ajaxForm. Use one or the other.
正是这一秒jquery-1.9.1没有得到.ajaxForm。使用其中之一。
Add the form jquery to the bottom of the scripts
将表单 jquery 添加到脚本底部
回答by Gautam
Use this and work is done
使用它并完成工作
<script src="http://malsup.github.com/jquery.form.js"></script>
回答by barnameha
i designed a good uploader just like this :
我设计了一个很好的上传器，就像这样：
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery.form.js"></script>
and worked complete and used ajax just like this :
并像这样完成并使用ajax：
$('form').ajaxForm
({
beforeSend: function()
{
var percentVal = '20%';
prog.css("width",percentVal);
},
uploadProgress: function(event, position, total, percentComplete)
{
var percentVal = percentComplete + '%';
prog.css("width",percentVal);
darsad.html(percentVal + ' uploading .');
//console.log(percentVal, position, total);
},
success: function()
{
var percentVal = '100%';
darsad.html(percentVal + ' uploaded success.');
prog.css("width",percentVal);
},
complete: function(xhr)
{
//status.html(xhr.responseText);
darsad.html(percentVal + ' uploaded complete.');
}
});
