javascript - 使用文件 API 读取 JavaScript 中的文件 "TypeError: e is undefined"

Question

我正在尝试将文件附加到 FormData 来处理通过 AJAX 上传的文件，阅读后并继续寻找解决方案无需使用外部插件我发现 this我试图在我的代码中使用它，所以我做了这个:

$(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

而且我无法找到我的错误在哪里或发生了什么。 Here 是一个带有测试代码的 fiddle ，任何人都可以帮助我并告诉我我做错了什么吗？

更新

这个错误在 jsFiddle 上是不一样的，如果你看一下 Firebug 控制台，错误就会是这个:

TypeError: obj is undefined 
  length = obj.length,

Answer 1

您的问题出在这一行:

files = e.target.files;

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

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

因此 e.target 将是文件输入元素，并且 e.target.files 可以工作。

您已经更改了代码，并且在提交按钮单击处理程序中调用了它。因此，e.target 指的是提交按钮，而 e.target.files 则不指任何内容。

因此，将您的代码更改为以下内容，它将起作用:

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

请参阅此处的工作 fiddle :http://jsfiddle.net/manishie/xyqoozb5/2/