求助：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

You should use the complete form of the error function:

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

textStatus and errorThrown will provide you with more information about the nature of the error.