javascript 类型错误：在未实现接口 FormData 的对象上调用了“追加”。再次
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21962698/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
TypeError: 'append' called on an object that does not implement interface FormData. Again
提问by Alex
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.
尝试执行 ajax 上传时，我在 firebug 中收到这些错误，但我不知道为什么。我无法在以前的任何帖子中找到答案。
1.TypeError: 'append' called on an object that does not implement interface FormData. list.appendChild(li);
1.TypeError: 'append' 在未实现接口 FormData 的对象上调用。list.appendChild(li);
2.TypeError: list is null 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>
回答by Josh Durham
FormData Issue
表单数据问题
The first thing I would suggest is adding
我建议的第一件事是添加
proccessData: false,
contentType: false
to your ajax request, but you're already doing that.
到您的 ajax 请求，但您已经这样做了。
Without more detail or being able to see a running example, I suggest checking out this articleand 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,
document.getElementById('response').innerHTML = res;是更换的HTML中<div id='response'>与的res。所以，
<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)
（注意：如果您+=改为使用，您将保留原始 html）
Now assuming resdoes 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
现在假设res没有带有 的元素id='image-list'，当您尝试将图像列表放入 时showUploadItem(...)，它将不存在，因此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.
并在您想要显示上传时切换它的可见性，同时隐藏内容（<div id='response'>如果您不想显示）。
When uploading has finished, hide the uploading text and show your response.
上传完成后，隐藏上传文本并显示您的回复。
