0

这似乎适用于我不需要上传的动态更改表单。

<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>

但是当我添加这个时，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>

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

我使用来自http://www.phpletter.com/Our-Projects/AjaxFileUpload/的脚本

4

1 回答 1

0

经过一个漫长的夜晚，我使用来自 malsup.github.io 的脚本解决了 AJAX 上传问题......我编写的脚本已经在工作 $.post 跟随上传并将表单数据发送到其相应的 php 文件。＃美丽

<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>

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

于 2013-05-07T05:41:23.883 回答