Ajax xhr 产生错误

Question

我使用与此完全相同的代码来上传图像并显示进度，但在这种情况下，唯一的变化是上传音频文件，但 xhr 只是停止并产生此错误：

[object Object]an error occurred

html:

<form enctype="multipart/form-data" id="audioForm">
    <p>Click browse to choose the audio file(mp3) from your PC (Maximum file size is 5mb)</p>
    <input type="file" name="audio" value="" class="input-xlarge required"><br />
    <label for="song_title">Song Title</label>
    <input type="hidden" name="act_id" value="<?=$act_id?>">
    <input type="text" class="form-control" id="song_title" name="song_title">
    <input type="button" class="btn btn-info" value="Upload Images" id="uploadAudio" />
</form>

<div id="progress" style="display:none;">
    <progress value="0" max="100"></progress>
</div>
<div id="response" style="display:none;"></div>

JQuery:

$('body').on('click', '#uploadAudio', function(){

        var form = new FormData($('#audioForm')[0]);
        $('#progress').fadeIn();

        // Make the ajax call
        $.ajax({
            url: '/ajax/actions/addAudio.php?act_id=<?=$act_id?>',
            type: 'POST',
            xhr: function() {
                var myXhr = $.ajaxSettings.xhr();
                if(myXhr.upload){
                    myXhr.upload.addEventListener('progress',progress, false);
                }
                return myXhr;
            },
            success: function (res) {
                $('#progress').hide();
                $('#response').show();
                $('#response').html(res);
                $("#audioDisplay").load('/ajax/display/audioDisplay.php?act_id=<?=$act_id?>');
            },
            error: function(res){
                $('#progress').hide();
                $('#response').show();
                $('#response').html(res + 'an error occurred');
            },
            data: form,
            cache: false,
            contentType: false,
            processData: false
         });
});

有什么明显的吗？

新的错误函数：

error: function(jqXHR, textStatus, errorThrown){
    $('#response').html('textStatus: ' + textStatus + '<br>errorThrown: ' + errorThrown);
},

这给出了这个错误：

textStatus: error
errorThrown: TypeError: Argument 2 of EventTarget.addEventListener does not implement interface EventListener.

Answer 1

你应该使用错误函数的完整形式：

error: function(jqXHR, textStatus, errorThrown) {
   ...
}

textStatus 和 errorThrown 将为您提供有关错误性质的更多信息。