我使用与此完全相同的代码来上传图像并显示进度,但在这种情况下,唯一的变化是上传音频文件,但 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>
查询:
$('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.