TypeError: 'append' called on an object that does not implement interface FormData. Again

Question

I'm getting these errors in firebug when trying to do an ajax upload, but I can't figure out why. I was unable to find an answer in any previous posts.

1.TypeError: 'append' called on an object that does not implement interface FormData. list.appendChild(li);

2.TypeError: list is 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 Issue

The first thing I would suggest is adding

proccessData: false,
contentType: false

to your ajax request, but you're already doing that.

Without more detail or being able to see a running example, I suggest checking out this article and the comments. It may provide a little more insight into your issue.

Null Referrence Issue

document.getElementById('response').innerHTML = res; is replacing the html inside of <div id='response'> with that of res . So,

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

becomes

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

(NOTE: if you use += instead, you'll retain the original html)

Now assuming res does not have an element with id='image-list' , when you try to get your image list in showUploadItem(...) , it will not exist, so list = null

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

Since you would like to display "Uploading..." to the user, an easy solution is adding an element to your page like

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

and just toggle the visibility of it when you want to display uploading while simultaneously hiding the content of <div id='response'> if you don't want that to be displayed.

When uploading has finished, hide the uploading text and show your response.

TypeError: 'append' called on an object that does not implement interface FormData. Again

Question

1 answers

solution1
2 2014-02-23 02:49:06

TypeError: 'append' called on an object that does not implement interface FormData. Again

Question

1 answers

solution1 2 2014-02-23 02:49:06

solution1
2 2014-02-23 02:49:06