TypeError: 'append' вызывается для объекта, который не реализует интерфейс FormData. Очередной раз

Question

TypeError: 'append' вызывается для объекта, который не реализует интерфейс FormData. Очередной раз

0

Я получаю эти ошибки в firebug при попытке выполнить загрузку ajax, но я не могу понять, почему. Я не смог найти ответ в предыдущих сообщениях.

1.TypeError: 'append' вызывает объект, который не реализует интерфейс FormData. 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>

Alex 23 фев. 2014, в 01:48

Источник

0

Вы передаете два параметра в showUploadedItem() когда вызываете его внутри своего input.addEventListener('change') . showUploadedItem() принимает только один, поэтому для source устанавливается значение e.target.result а file.filename игнорируется.
Josh Durham 23 фев. 2014, в 01:15
0

спасибо, я постараюсь изменить это, и дам вам знать ..
Alex 23 фев. 2014, в 01:49

Теги:

javascript

jquery

1 ответ

Ещё вопросы

Вы передаете два параметра в showUploadedItem() когда вызываете его внутри своего input.addEventListener('change') . showUploadedItem() принимает только один, поэтому для source устанавливается значение e.target.result а file.filename игнорируется.
спасибо, я постараюсь изменить это, и дам вам знать ..

Josh Durham · Answer 1 · 2014-02-23T00-22-00.000Z

Ошибка FormData

Первое, что я хотел бы предложить, это добавить

proccessData: false,
contentType: false

к вашему запросу ajax, но вы уже это делаете.

Без дополнительной информации или возможности увидеть пример работы, я предлагаю проверить эту статью и комментарии. Это может дать вам немного больше информации о вашей проблеме.

Проблема с Null Referrence

document.getElementById('response').innerHTML = res; заменяет html внутри <div id='response'> на res. Так,

<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

Поскольку вы хотите отобразить "Uploading..." пользователю, простое решение добавляет элемент на вашу страницу, например

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

и просто переключать видимость этого, когда вы хотите отображать загрузку, одновременно скрывая содержимое <div id='response'> если вы не хотите, чтобы это отображалось.

Когда загрузка завершена, скройте загружаемый текст и покажите свой ответ.

@ Алекс, этот ответ помог вам или вы все еще получаете ту же ошибку?