TypeError: 'append' appelée sur un objet qui n'implémente pas l'interface FormData. De nouveau

J'obtiens ces erreurs dans firebug lors de la tentative de faire une requête ajax upload, mais je ne peux pas comprendre pourquoi. J'ai été incapable de trouver une réponse dans tous les posts précédents.

1.TypeError: 'append' appelée sur un objet qui n'implémente pas l'interface FormData.
liste.appendChild(li);

2.TypeError: la liste est null
liste.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>
  • Vous êtes de passage à deux paramètres à showUploadedItem() lorsque vous appelez à l'intérieur de votre input.addEventListener('change') bloc de code. showUploadedItem() n'accepte qu'un seul, de sorte source est en cours de mise à e.target.result et file.filename est ignoré.
  • merci, je vais essayer de le changer, et vous permettra de savoir..
InformationsquelleAutor Alex | 2014-02-23
  1. 2

    FormData Question

    La première chose que je suggère, c'est l'ajout de 

    proccessData: false,
contentType: false

    à votre requête ajax, mais vous êtes déjà ce que.

    Sans plus de détails ou d'être en mesure de voir un exemple concret, je vous suggère de vérifier cet article et les commentaires. Il peut fournir un peu plus de perspicacité dans votre question.

    Null Referrence Question

    document.getElementById('response').innerHTML = res; est de remplacer le code html à l'intérieur de <div id='response'> avec celle de res. Donc, 

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

    devient

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

    (REMARQUE: si vous utilisez += au lieu de cela, vous pourrez conserver l'original du html)

    Maintenant en supposant res ne dispose pas d'un élément avec id='image-list', lorsque vous essayez d'obtenir votre liste d'images dans showUploadItem(...), il n'existe pas, donc list = null

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

    Puisque vous souhaitez afficher "Téléchargement..." pour l'utilisateur, une solution simple est d'ajouter un élément à votre page comme

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

    et juste activer /désactiver la visibilité lorsque vous souhaitez afficher le téléchargement, tout en cachant le contenu de <div id='response'> si vous ne voulez pas que pour être affiché.

    Lorsque le téléchargement est terminé, cacher le téléchargement de texte et de montrer votre réponse.

    • a cette réponse vous aider, vous ou êtes-vous toujours obtenir la même erreur?
    InformationsquelleAutor Josh Durham