Question

我一直收到这个错误：

未捕获的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文件，它会出错，但现在还可以。

Answer 1

我认为错误是因为在我们开始发起XHR请求之前调用上传事件。

 $.ajax({
        url:"server.php",
        beforeSend:function(xhr){
          xhr.upload.addEventListener("progress", function(event){

          });
        },
       ...

与我们在xhr.upload.addEventListener("progress"中调用beforeSend的代码一样。由于我们尚未启动请求，（我们位于beforeSend）我们无法拥有任何xhr.upload个对象。我们可以通过将代码移至xhr而不是beforeSend来解决此问题。

注意：您需要jQuery版本＆gt; 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-settings

beforeSend xhr object：Uncaught TypeError：无法读取属性＆＃39; addEventListener＆＃39;未定义的

1 个答案: