Question

在尝试进行ajax上传时，我在firebug中遇到这些错误，但我无法弄清楚原因。我以前的任何帖子都找不到答案。

1.TypeError：对未实现接口FormData的对象调用'append'。 list.appendChild（LI）;

2.TypeError：list为null 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>

Answer 1

FormData问题

我建议的第一件事是添加

proccessData: false,
contentType: false

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

如果没有更多细节或能够看到正在运行的示例，我建议您查看this article和评论。它可以让您更深入地了解您的问题。

空参考问题

document.getElementById('response').innerHTML = res;正在将<div id='response'>内的html替换为res的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'>的内容。

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

TypeError：在没有实现接口FormData的对象上调用'append'。再次

1 个答案: