Jquery $。文件上载的后序列化

这似乎适用于不需要上传的动态变化表单

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://mediahood.net/js/ajaxfileupload.js"></script>
<script>
$(document).ready(function(){

$("#txtrform").submit(function(){

    $.post($(this).attr('action'), $(this).serialize(), function(data) {
        $("#col3").load("/include/txtrpbox/feed.php");
        $('input#txtrinput').val('');
    });

    return false;
});

});
</script>

$（文档）.ready（函数（）{
$（“#txtrform”）.submit（函数（）{
$.post（$（this.attr（'action'），$（this.serialize（）），函数（数据）{
$（“#col3”）.load（“/include/txtrpbox/feed.php”）；
$（'input#txtrinput'）.val（''）；
});
返回false；
});
});

但是当我添加这个时，AJAX失败了，表单提交通常会重新加载页面

<script type="text/javascript" src="http://mediahood.net/js/ajaxfileupload.js"></script>
<script>
$(document).ready(function(){

    $("#txtrform").submit(function(){

        $.post($(this).attr('action'), $(this).serialize(), function(data) {
            $("#col3").load("/include/txtrpbox/feed.php");
            $('input#txtrinput').val('');
        });

        return false;
    });

    function ajaxFileUpload()
    {
        //starting setting some animation when the ajax starts and completes
        $("#loading")
        .ajaxStart(function(){
            $(this).show();
        })
        .ajaxComplete(function(){
            $(this).hide();
        });

        /*
            prepareing ajax file upload
            url: the url of script file handling the uploaded files
                        fileElementId: the file type of input element id and it will be the index of  $_FILES Array()
            dataType: it support json, xml
            secureuri:use secure protocol
            success: call back function when the ajax complete
            error: callback function when the ajax failed

                */
        $.ajaxFileUpload
        (
            {
                url:$.post($(this).attr('action'),
                secureuri:false,
                fileElementId:'fileToUpload',
                dataType: 'json',
                success: function (data, status)
                {
                    if(typeof(data.error) != 'undefined')
                    {
                        if(data.error != '')
                        {
                            alert(data.error);
                        }else
                        {
                            alert(data.msg);
                        }
                    }
                },
                error: function (data, status, e)
                {
                    alert(e);
                }
            }
        )

        return false;

    } 

});
</script>

$（文档）.ready（函数（）{
$（“#txtrform”）.submit（函数（）{
$.post（$（this.attr（'action'），$（this.serialize（）），函数（数据）{
$（“#col3”）.load（“/include/txtrpbox/feed.php”）；
$（'input#txtrinput'）.val（''）；
});
返回false；
});
函数ajaxFileUpload（）
{
//在ajax启动和完成时开始设置一些动画
$（“#加载”）
.ajaxStart（函数（）{
$（this.show（）；
})
.ajaxComplete（函数（）{
$（this.hide（）；
});
/*
准备ajax文件上载
url：处理上传文件的脚本文件的url
fileElementId：输入元素id的文件类型，它将是$\u FILES数组（）的索引
数据类型：支持json、xml
secureuri：使用安全协议
成功：ajax完成时回调函数
错误：ajax失败时的回调函数
*/
$.ajaxFileUpload
(
{
url:$.post（$（this.attr（'action'），
secureuri:false，
fileElementId:'fileToUpload'，
数据类型：“json”，
成功：功能（数据、状态）
{
if（typeof（data.error）！=“未定义”）
{
如果（data.error！=''）
{
警报（数据错误）；
}否则
{
警报（data.msg）；
}
}
},
错误：功能（数据、状态、e）
{
警报（e）；
}
}
)
返回false；
} 
});

为什么？我希望我的非上传和上传表单都能正常工作

---

经过一个漫长的夜晚，我用malsup.github.io中的脚本解决了AJAX上传问题……我编写的已经在运行的$.post在上传之后将表单数据发送到相应的php文件

（功能（）{
var bar=$（'.bar'）；
变量百分比=$（'.percent'）；
变量状态=$（“#状态”）；
$（'#txtrform'）.ajaxForm({
beforeSend:function（）{
status.empty（）；
var percentVal='0%'；
条形宽度（百分比值）
html（percentVal）；
},
上载进度：功能（事件、位置、总数、完成百分比）{
var percentVal=percentComplete+“%”；
条形宽度（百分比值）
html（percentVal）；
},
成功：函数（）{
var percentVal=‘100%’；
条形宽度（百分比值）
html（percentVal）；
},
完成：函数（xhr）{
html（xhr.responseText）；
}
}); 
})();       
$（文档）.ready（函数（）{
$（“#txtrform”）.submit（函数（）{
$.post（$（this.attr（'action'），$（this.serialize（）），函数（数据）{
$（“#col3”）.load（“/include/txtrpbox/feed.php”）；
$（'input#txtrinput'）.val（''）；
});
返回false；
});
});

---

现在我可以将各种类型的文档上传到我网站的提要中，包括：文本（如twitter）、嵌入或上传视频、导入或上传照片、共享或上传音频。这就是我所需要的。

您缺少一个

）

或

{

在ajaxfileupload函数内部的

$.post上，语法错误。复制粘贴错误？是
$.post（
甚至应该在那里吗？iono我只想知道如何将ajaxFileUpload脚本与第一个代码框中的工作脚本结合使用。它们是两种不同的形式吗？还是什么。目前还不清楚您在做什么。目前您甚至没有调用实现ajax文件上传的函数。我有六种不同的方法et表单共享相同的ajax post脚本，因为它是相同的表单。当我动态更改表单时，我只修改操作并更改输入。其中三个表单不需要上传，因此我的$.post序列化可以工作。但是我尝试完成其他三个表单中的一个，它们不处理。input=文件不进行任何上传e序列化失败。
<script type="text/javascript" src="http://{mysite}/js/ajaxfileupload.js"></script>
<script src="http://{mysite}/js/jquery.form.js"></script> 

<script>
(function() {

var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');

$('#txtrform').ajaxForm({
    beforeSend: function() {
        status.empty();
        var percentVal = '0%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    uploadProgress: function(event, position, total, percentComplete) {
        var percentVal = percentComplete + '%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    success: function() {
        var percentVal = '100%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    complete: function(xhr) {
        status.html(xhr.responseText);
    }
}); 

})();       
</script>
<script>
$(document).ready(function(){

    $("#txtrform").submit(function(){

        $.post($(this).attr('action'), $(this).serialize(), function(data) {
            $("#col3").load("/include/txtrpbox/feed.php");
            $('input#txtrinput').val('');
        });

        return false;
    });

});
</script>