使用File API读取文件，使用File API显示“TypeError：e is undefined”

我试图附加文件到FormData来处理通过AJAX上传的文件，并在阅读并继续查找解决方案而无需使用外部插件我发现this，我想用我的代码，所以我做了这个：使用File API读取文件，使用File API显示“TypeError：e is undefined”

$(function() { 
    $('.smart-form').on('submit', function (e) 
    { 
     var files; 

     e.stopPropagation(); // Stop stuff happening 
     e.preventDefault(); // Totally stop stuff happening 

     if ($(".state-error").length < 1) { 
      // Create a formdata object and add the files 
      var data = new FormData(); 

      // Check for the various File API support. 
      if (window.File && window.FileReader && window.FileList && window.Blob) { 
       // Grab the files and set them to our variable 
       files = e.target.files; 

       $.each(files, function (key, value) 
       { 
        data.append(key, value); 
       }); 
      } 

      // Create a jQuery object from the form 
      $form = $(e.target); 

      // Serialize the form data 
      var formData = $form.serializeArray(); 

      $.ajax({ 
       async: false, 
       url: '{{ path('update-product', {'id': id}) }}', 
       type: 'POST', 
       data: formData, 
       cache: false, 
       success: function (data, textStatus, jqXHR) 
       { 
        if (typeof data.error === 'undefined') 
        { 
         // Success so call function to process the form 
         console.log("SUCCESS"); 
        } 
        else 
        { 
         console.log("ERRORS"); 
        } 
       }, 
       error: function (jqXHR, textStatus, errorThrown) 
       { 
        // Handle errors here 
        console.log("ERRORS"); 
       }, 
       complete: function() 
       { 
        // STOP LOADING SPINNER 
       } 
      }); 
     } 
    }); 
});

但我在Firebug控制台收到此错误：

TypeError: e is undefined

而且我不ABL e找到我的错误或发生了什么。 Here是一个带有测试代码的小提琴，可以帮助我并告诉我我做错了什么吗？

更新

的错误不是在的jsfiddle一样的，如果你在Firebug控制台看看错误trown是这个，而不是：

TypeError: obj is undefined 
    length = obj.length,

来源

2014-09-21 ReynierPM

你的问题是这一行：

files = e.target.files;

在您提供的链接中，他将事件处理程序附加到文件输入elem的更改事件而不是提交按钮：

document.getElementById('files').addEventListener('change', handleFileSelect, false);

所以e.target将文件输入元素和e.target.files将工作。

你已经改变了代码，你在提交按钮点击处理程序中调用它。因此，e.target引用提交按钮，而e.target.files则不涉及任何内容。

所以你的代码改成这样，它会工作：

files = $('form #product_imageFile_file')[0].files;

看到这里的工作小提琴：http://jsfiddle.net/manishie/xyqoozb5/2/

来源

2014-09-21 04:48:10 manishie

使用File API读取文件，使用File API显示“TypeError：e is undefined”

回答

相关问题