我一直收到这个错误:
未捕获的TypeError:无法读取未定义的属性"addEventListener"在我尝试应用"进度"事件侦听器的地方
为什么我会出现此错误?
<script type="text/javascript">
$(document).ready(function(){
$("#wb_bc_file_field").change(function(){
var formdata = new FormData();
formdata.append("video",$("#wb_bc_file_field")[0]);
// Start Ajax Call
$.ajax({
url:"server.php",
beforeSend:function(xhr){
xhr.upload.addEventListener("progress", function(event){
});
},
processData:false,
contentType:"multipart/form-data; charset=UTF-8",
data:formdata
}).done(function(){
console.log("Request is complete.");
}).fail(function(){
console.log("Request has failed.");
}).always(function(){
console.log("Request has closed.");
}); // End .ajax
}); // End .change
}); // End .ready
</script>
这是整个脚本的一个jsfiddle。由于没有php文件,它会给出一个错误,但目前还可以。
我认为错误的原因是在我们开始启动XHR请求之前就调用了上传事件。
$.ajax({
url:"server.php",
beforeSend:function(xhr){
xhr.upload.addEventListener("progress", function(event){
});
},
...
在代码中,我们在beforeSend
中调用xhr.upload.addEventListener("progress"
。由于我们还没有启动请求,(我们在beforeSend
中)我们不能有任何xhr.upload
对象。我们可以通过将代码移动到xhr
而不是beforeSend
来解决这个问题。
注意:您需要jQuery版本>1.5.1
$.ajax({
url:"server.php",
xhr: function()
{
var xhr = new window.XMLHttpRequest();
//Upload progress
xhr.upload.addEventListener("progress", function(evt){
...
}, false);
return xhr;
},
以下是文档:http://api.jquery.com/jquery.ajax/#jQuery-ajax url设置