TypeError：在未实现接口 FormData 的对象上调用了“附加”。再次答案

【问题标题】：TypeError: 'append' called on an object that does not implement interface FormData. AgainTypeError：在未实现接口 FormData 的对象上调用了“附加”。再次
【发布时间】：2014-03-24 15:16:08
【问题描述】：

尝试进行 ajax 上传时，我在 firebug 中遇到这些错误，但我不知道为什么。我无法在之前的任何帖子中找到答案。

1.TypeError：在未实现接口 FormData 的对象上调用了“附加”。 list.appendChild(li);

2.TypeError: 列表为空 list.appendChild(li);

<?php

    if(!empty($_FILES['images'])){
        if($_FILES['images']['error'][$key]== 0 ){
            move_uploaded_file($_FILES['images']['tmp_name'], "../profile/1.jpg");
            $uploaded='1';
            ///create thumbnail/////
        }
        echo 'Image uploaded'; 
    }

?>

<!DOCTYPE html>

<html>

    <head>

        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="../media/js/js.js"></script>

    </head>
    <body>

        <form id="editUserProfile" method="post" action="" enctype="multipart/form-data">
            <input type="file" id="images" name="images" multiple />
            <button type="submit" id="btn" >Save</button>
        </form>

        <div id='response'>

            <ul id='image-list'>

            </ul>

        </div>

        <script type='text/javascript'>

        (function (){

            var input=document.getElementById('images'),
                formdata=false;

            function showUploadedItem(source){
                var list=document.getElementById('image-list'),
                    li=document.createElement('li'),
                    img=document.createElement('img');
                img.src=source;
                li.appendChild(img);
                list.appendChild(li);
            }

            if(window.FormData){
                formdata=new FormData();
                document.getElementById('btn').style.display="none";
            }

            input.addEventListener('change', function(evt){
                document.getElementById('response').innerHTML='Uploading...'; 
                var i=0,len=this.files.length,img,reader,file;

                for(; i< len; i++){
                     file=this.files[i];

                     if(!!file.type.match(/image.*/)){
                          if(window.FileReader){
                              reader = new FileReader();
                              reader.onloadend=function(e){
                                  showUploadedItem(e.target.result, file.fileName);
                              };
                              reader.readAsDataURL(file);
                          }
                          if(formdata){
                              formdata.append("images[]", file);
                          }
                     }
                }

               if(formdata){
                   $.ajax({
                       url:'a.php',
                       type:'POST',
                       data:formdata,
                       proccessData:false,
                       contentType:false,
                       success:function(res){
                           document.getelementById('response').innerHTML=res;
                       }
                   });
               }
            },false);
        }());

        </script>
    </body>
</html>

【问题讨论】：

当您在 input.addEventListener('change') 代码块中调用它时，您将两个参数传递给 showUploadedItem()。 showUploadedItem() 只接受一个，所以source 被设置为e.target.result 而file.filename 被忽略。
谢谢您，我会尝试更改它，并会通知您..

标签： javascript jquery

【解决方案1】：

FormData 问题

我建议的第一件事是添加

proccessData: false,
contentType: false

到您的 ajax 请求，但您已经这样做了。

如果没有更多细节或无法查看运行示例，我建议您查看this article 和 cmets。它可能会让您更深入地了解您的问题。

空引用问题

document.getElementById('response').innerHTML = res; 正在用res 替换<div id='response'> 内部的html。所以，

<div id='response'>
    <ul id='image-list'>
    </ul>
</div>

变成

<div id='response'>
    <!-- Content of 'res' -->
</div>

（注意：如果你改用+=，你会保留原来的html）

现在假设res没有id='image-list'的元素，当你尝试在showUploadItem(...)中获取你的图片列表时，它不会存在，所以list = null

 list = document.getElementById('image-list') // list will be null

由于您想向用户显示“正在上传...”，一个简单的解决方案是向您的页面添加一个元素，例如

<div id="LoadingText">
    Uploading...
<div>

当你想显示上传时，只需切换它的可见性，同时隐藏<div id='response'> 的内容，如果你不想显示它。

上传完成后，隐藏上传文本并显示您的回复。

【讨论】：

@Alex 这个答案对你有帮助还是你仍然遇到同样的错误？