使用 jquery.form.js 的异步上传问题答案

【问题标题】：Async upload problem using jquery.form.js使用 jquery.form.js 的异步上传问题
【发布时间】：2011-05-12 06:21:53
【问题描述】：

我正在使用 jquery.form 插件在 MVC 项目中异步上传文档。

从this 上一个答案中汲取灵感，这是我在页面上的内容：

<% using(Html.BeginForm("Create", "JobFile", FormMethod.Post, new { id = "uploadForm", enctype = "multipart/form-data" })) %>
<% { %>
<%: Html.ValidationSummary() %>

    <input type="file" id="fileToUpload" />
    <input type="submit" value="Upload file" />
    <input type="text" id="RelatedFileName" />

<% } %>

<script type="text/javascript" src="../../Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.form.js"></script>
<script type="text/javascript">
    $(function () {
        $('#uploadForm').ajaxForm(function (result) {
            if (result.errorMessage != '') {
                alert(result.errorMessage);
            } else {
                $('#RelatedFileName').val(result.fileName);
            }
        });
    });
</script>

我的问题是当页面加载时出现以下 javascript 错误：

Uncaught TypeError: Object # has no method 'ajaxForm'

这个错误出现在包含

的行

$('#uploadForm').ajaxForm(function (result) {

谁能告诉我为什么会出现这个错误？

【问题讨论】：

仅供参考，/Scripts/jquery.form.js 与../../Scripts/jquery.form.js 的工作方式相同（如果不是更一致） - 两者都从站点根目录开始。

标签： jquery ajax forms file-upload asynchronous

【解决方案1】：

检查 jquery 没有被两次包含在页面中。

【讨论】：

谢谢一百万！经过数小时的努力，这就是解决方案，

【解决方案2】：

这是我用于 MVC3、CodeIgniter 和 Yii 的方法。重要的是，您应该指定 method="post"、enctype 和 encoding="multipart/form-data"

var submitForm = function(_formId){
var _genMsg = $('#genMsg');
_submitForm = $('form').index($('#'+_formId));
if(subCommonForm(_submitForm, 'main')){
    _genMsg.attr('class', 'information-box round');
    _genMsg.html('Saving...');
    $('#'+_formId).ajaxForm({
        dataType: 'json',
        success: function (data) {
            _genMsg.attr('class', 'information-box round');

            data.code == 0
                ? _genMsg.attr('class', 'confirmation-box round')
                : _genMsg.attr('class', 'error-box round');

            _genMsg.html(data.message);
            _genMsg.fadeIn();
        }
    });

    $('#'+_formId).submit();
}
};

【讨论】：

【解决方案3】：

'uploadForm' 是您的 <form> 对象的 id 吗？如果是这样，那么您可能需要检查 FireBug 之类的内容，以确保您的插件正确包含在您的页面中。

【讨论】：

是的，'uploadForm' 是我的表单的 ID。下载的源是“
”。如果我在 Chrome 中使用调试/源工具，我可以看到 jquery.form.js 正在下载（它在“脚本”选项卡上列出）。
IE9 说的差不多：正在下载脚本文件，出现的错误是“SCRIPT438：对象不支持此属性或方法”。
您可能需要更改您的脚本，以便在页面加载时调用它： $(document).ready(function () { ...code...});这样，如果安装了插件，表单将具有正确原型化的功能。否则我会查看你的脚本，因为那应该可以。
我已经复制了整个 jquery.form 插件脚本并将其粘贴到页面上的
是否存储在本地？如果是这样，可能是权限问题。

【解决方案4】：

快捷方式：

$(function () {

在最新版本的jQuery中不起作用，必须使用：

 $(document).ready(function () {

【讨论】：

了解这一点很有帮助，但如果“$(function(){”在我使用的版本中不起作用，我不会在页面加载时收到错误消息。尽管如此，谢谢提示，我现在已经更改了。
这完全是错误的。我有 1.7.2，这可以正常工作。
在撰写本文时，最新版本确实如此
嗯。我没有注意到日期戳。如果您编辑您的问题，我可以删除我的反对票。

【解决方案5】：

检查您是否有 $

$('#your-form')

而不是

('#your-form')

【讨论】：