使用Ajax上传多个文件而不进行POST

时间:2014-10-13 22:15:00

标签: javascript jquery ajax

我举了一个How can I upload files asynchronously?的例子,这是一个很好的例子BTW。

由于某些原因,我的POST没有进入我的php文件。即使我print_r($_POST)数组出现空白。我试图用这个脚本传递2个字段。

如果我在php文件上执行echo "test";,它将返回该字符串。

我也试过var formData = new FormData($('form').serialize());

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $(':button').click(function(){
        var formData = new FormData($('form')[0]);
        $.ajax({
            url: 'inserttest.php',  //Server script to process data
            type: 'POST',
            xhr: function() {  // Custom XMLHttpRequest
                var myXhr = $.ajaxSettings.xhr();
                if(myXhr.upload){ // Check if upload property exists
                    myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // For handling the progress of the upload
                }
                return myXhr;
            },
            success: function(data) {
                alert(data);    
            },
            data: formData,
            cache: false,
            contentType: false,
            processData: false
        });
    });
});
function progressHandlingFunction(e){
    if(e.lengthComputable){
        $('progress').attr({value:e.loaded,max:e.total});
    }
}
</script>
</head>
<form enctype="multipart/form-data">
    <input type="text" name="words" id="words" />
    <input name="file" type="file" id="file" />
    <input type="button" value="Upload" />
</form>
<progress></progress>

更进一步,使formData让它走得很远......仍然没有运气

var words = $('#words').attr('value');
var file = $('#file').attr('value');
var formData = new FormData();
formData.append("words", words);
formData.append("file", file);

inserttest.php

尝试

<?php
echo print_r($_POST);
?>

<?php
echo print_r($_FILES);
?>

1 个答案:

答案 0 :(得分:0)

您使用的Jquery版本已过时,不支持此功能!
更改版本1.3.0:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
......到版本1.9.1:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
......它的确有效!! :d